0
通過展示發生的事情可能更容易。覆蓋頁面正文文本的黑框/ div是我網站的主導航（導航文本是淡藍色，因此可能很難看清楚）。它的假設要在標題中的羽化圖像的左側（沒有邊框）。相反，它是正常的文檔流之外：在文檔流之外導航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;
}
任何定位的幫助將非常感激。
你能張貼鏈接嗎？更容易檢查檢查元素或螢火蟲比讀取所有代碼 –
鏈接到什麼？該網站不生活。 –
不幸的是，這幾乎是我的代碼的程度。我正在使用normalize.css作爲我的重置，而內容只是兩個'
'，我還沒有設計過。沒有別的。 –