0

何が起こっているのかを示すことから始める方がおそらく簡単です。ページの本文テキストの上にある黒いボックス/div は、私のサイトのメイン ナビゲーションです (ナビゲーション テキストは水色なので、見にくい場合があります)。ヘッダーの羽の画像の左側 (枠なし) にあるはずです。代わりに、通常のドキュメント フローの外にあります。

ここに画像の説明を入力

そして、それがあるべき場所：

ここに画像の説明を入力

ここに私の小枝のテンプレートがあります:

<!DOCTYPE html>
<html dir="ltr" lang="en-us">
    <head>
        <meta charset="UTF-8" />
        <meta name="keywords" content="Adi Rule, young adult author, author, NH, New Hampshire" />
        <meta name="description" content="Official homesite of Adi Rule, young adult author" />
        <title>{% block title %}Adi Rule{% endblock %}</title>
        {% stylesheets 'bundles/majorproductionsadisite/css/*.css' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
        {% endstylesheets %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
    <div id="layout">
        <div id="header">
                <img src="{{ asset('bundles/majorproductionsadisite/images/adi-gradient-logo.jpg') }}" alt="Adi Rule" />
                <div id="nav">
                    <ul>
                        <li><a href="{{ path('_bio') }}">Bio</a></li> |
                        <li><a href="{{ path('_books') }}">Books</a></li> |
                        <li><a href="{{ path('_blog') }}">What's New</a></li> |
                        <li><a href="{{ path('_contact') }}">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div id="content">
                {% block content %}{% endblock %}
            </div>
            <hr />
            <div id="footer">
                Website designed and created by Major Productions LLC
            </div>
        </div>
        {% block javascripts %}{% endblock %}
    </body>
</html>

そして、そのページのコンテンツ テンプレート (他のページはまだ構築されていません):

{% extends "::base.html.twig" %}

{% block content %}
<div class="book">
Music flows in Sing Da Navelli's blood. When she enrolls at a prestigious conservatory, her first opera audition is for the role of her dreams.
But this leading role is the last Sing's mother ever sang, before her controversial career, and her life, were cut tragically short.
As Sing struggles to escape her mother's shadow and prove her own worth, she is drawn to the conservatory's icy forest, a place steeped in history, magic, and danger.
She soon realizes there is more to her new school than the artistry and politics of classical music.
With the help of a dark-eyed apprentice who has secrets of his own, Sing must unravel the story of the conservatory's dark forest and the strange creature who lives there -- and find her own voice.
</div>

<div class="book">
<p>Papa says I’m a good girl, and he’s right. I don’t do anything bad. I’ve never stolen a piece of cake or killed a beetle. I’ve never wished harm on anyone, not even the priests who would damn me to Eternal Drowning. Not even the people who burned our house to the ground the night my mother died.</p>
<p>It’s a safety precaution. I can feel wickedness smoldering in my chest, balled up, writhing. Like the boiling water they pump out of the lake, solid lead pressing it on all sides until it sloshes and frenzies itself into steam, still trapped. I feel like if I did one small evil thing, I wouldn’t be able to stop myself until I’d laid waste to the world.</p>
<p>Papa says I’m a good girl, and he’s right.<br />
For now.</p>
</div>
{% endblock %}

私の混乱は私の CSS に起因します。私は、nav div がドキュメント フローの外側にある必要があることを示唆するようなものは使用していません。とにかく、ナビゲーションを配置する最善の方法がわかりません。

私のCSS：

@font-face{
    font-family: 'Pigeon';
    src: url('../fonts/pigeon-webfont.eot');
    src: url('../fonts/pigeon-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/pigeon-webfont.woff') format('woff'),
    url('../fonts/pigeon-webfont.ttf') format('truetype'),
    url('../fonts/pigeon-webfont.svg#webfont') format('svg');
}

#layout {
    width: 1000px;
    margin: 0 auto;
}

#header {
    background-color: /* #7797a7; */ #7799aa;
    height: 121px;
    font-family: 'Pigeon', Arial, sans-serif;
    font-size: 2.25em;
}

#nav {
    color: #d2e6f0;
    width: 500px;
    height: 120px;
    border: 1px solid black;
}

#nav ul {
    list-style-type: none;
}

#nav ul li {
    display: inline-block;
}

#nav ul li a {
    color: #d2e6f0;
    display: table-cell;
    height: 110px;
    vertical-align: bottom;
    padding-bottom: 10px;
    text-decoration: none;
}

#nav ul li a:hover {
    background-color: #3981a6;
}

#content {
    margin: 40px auto;
    width: 600px;
}

hr {
    color: #a5cce0;
    background-color: #a5cce0;
}

#footer {
    text-align: center;
}

ポジショニングの助けをいただければ幸いです。

4

1 に答える 1