2017-03-07 8 views
1

私はHTML/Jinja/CSSを初めて使い、sqlite3データベースから取得するWebページの作成を実験しています。現在、私はフォーマットに問題があります。同じ行ではなく、異なる行のbase.htmlと拡張ページのWebページ要素

テーブルの書式設定と一般的な外観に役立つブートストラップをインポートしました。

私はbase.htmlファイルとpage.htmlファイルを持っています。

</style> 
</head> 
<body> 
<div class="centered-wrapper">Nexus Gamification</div> 
<div>Points 
<li><a href="/teams">Team Points</a></li> 
<li><a href="/individual">Individual Points</a></li> 
    <ul> 
     <a href="/indivConnect">Connect</a> 
     <a href="/indivDevelop">Develop</a> 
     <a href="/indivLead">Lead</a> 
     <a href="/indivLearn">Learn</a> 
    <ul> 
</div> 
<li><a href="/events">Past Events</a></li> 
<hr> 
{% block content %}{% endblock %} 

その後、私のpage.htmlは次のようになります:内のリンクの直接の右側に表示される代わりに、テーブルの

{% extends "base.html" %} 
{% block content %} 
<body> 
    <div class="col-md-6 col-md-offset-3"> 
    <table class="table table-striped" align="center"> 
    ... 
    </table> 
    </div> 
{% endblock %} 

base.htmlファイルには、次のようになりますページには、リンクの右下に表示されます。リンクをサイドバー型取引にしたいのではなく、2つの要素が別の行にあるかのようにします。誰がなぜこれが起こっているのか知っていますか?それは私がbase.htmlに本文を持ち、 'extended'ページに本文があるからですか?

+0

私は答えを投稿しました。しかし、私は私の答えを編集する必要がありますので、1つの質問は、あなたはリンクを左にアロインしたいとブロックは、すぐ隣に争うのですか? –

答えて

0

私は正しく理解しています。リンクの下に{% block %}と表示されます。

これが正しい場合。行をスキップしている<hr>を削除します。したがって、<hr>タグの下にあるすべてのコンテンツはその下にあり、2つのボディを使用しています。それはちょうど一つの体でなければなりません。

  1. BLOCKあなたは<body>タグに

  2. を削除し、右{% block content %}{% endblock %}の下</body>を追加する必要があります<hr>

  3. を削除します。

スプリット。

<body> 
    <div class="centered-wrapper">Nexus Gamification</div> 
<div>Points 
<li><a href="/teams">Team Points</a></li> 
<li><a href="/individual">Individual Points</a></li> 
<ul> 
    <a href="/indivConnect">Connect</a> 
    <a href="/indivDevelop">Develop</a> 
    <a href="/indivLead">Lead</a> 
    <a href="/indivLearn">Learn</a> 
<ul> 
</div> 
<li><a href="/events">Past Events</a></li> 

{% block content %}{% endblock %} 

</body> 

{% extends "base.html" %} 
{% block content %} 
    <div class="col-md-6 col-md-offset-3"> 
     <table class="table table-striped" align="center"> 
     ... 
     </table> 
    </div> 
{% endblock %} 
関連する問題