У меня небольшая проблема с выравниванием горизонтальной панели навигации по центру браузера. Теперь, прежде чем выдвинуть этот запрос, я хочу указать, что я новичок в HTML и CSS, так что не беспокойтесь о том, что, несомненно, является быстрым решением!
Верхний и нижний колонтитулы должны быть полной ширины с фиксированным разделом содержимого в центре браузера. Панель навигации должна находиться под заголовком. В настоящее время полоса выравнивается по левому краю, но, похоже, она не сдвинется с места, не потеряв свою форму.
HTML:
<body>
<div id="header">
<div class="wrap">
<img src="images/logo_header.png" alt="Image alt." />
</div>
</div>
<div id="nav">
<div class="wrap">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
<li><a href="#">Option 6</a></li>
</ul>
</div>
</div>
<div id="content"><div class="wrap">Content</div></div>
<div id="footer"><div class="wrap">Footer</div></div>
</body>
и CSS:
body {
margin:0;
padding:0;
font-family:verdana;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#header {
float:left;
width:100%;
background-color:#FFCC33;
}
#nav {
float:left;
background-color:#FFCC33;
border-top:2px solid #000000;
}
#nav ul {
list-style:none;
display:inline;
margin:0px;
padding:0px;
}
#nav li {
display:inline;
line-height:1.8em;
}