Я пытаюсь создать макет с верхним и нижним колонтитулом шириной 100%, в то время как контейнер имеет ширину 940 пикселей.Я видел пример этого в блогах и новостных сайтах.Вместо того, чтобы перемещать содержимое, оно выглядит как привязка к верху и низу страницы.
Кроме того, у веб-сайта, который я создаю, есть только несколько страниц, поэтому я поместил навигацию внутри заголовка.,Навигация центрируется с помощью абсолютного позиционирования.
Когда я сжимаю окно (в любом браузере), все остается на своем месте, за исключением того, что я вижу белый фон, закрывающий содержимое под заголовком.Я не знаю, почему это происходит, но я думаю, что выпадающее меню могло вызвать проблемы.Спасибо
Вот мой код CSS:
body,html,ul,li{
margin:0;
padding:0;
color:#000;
}
#wrap-head {
width:100%;
margin:0 auto;
background-image:url('header-bg.png');
}
#header {
width: 940px;
height: 140px;
max-height:130px;
position: relative;
margin-left:auto;
margin-right:auto;
padding: 0;
clear:both;
background-color: white;
}
.logo {
position: absolute;
top:0;
left:0;
}
#nav {
position:absolute;
top:48px;
left:470px;
}
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
z-index:5;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:6px;
color:#fff;
background:#0066ff;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#0066ff;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
left:0px;
background:#ccc;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#0066ff;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
/*-- MAIN BODY STYLES --*/
#wrap-body {
width:100%;
margin:0 auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.875em;
background-color: black;
overflow:hidden;
}
h2 {
margin:0 0 1em;
}
#container {
width:940px;
margin:0 auto;
overflow:hidden;
background-color: #666666;
}
#content {
float:left;
width:640px;
padding:5px 10px;
background-color:#666666;
}
#sidebar {
float:right;
width:260px;
padding:5px 10px;
background:#CCC;
}
#footer {
clear:both;
padding:5px 10px;
background:#333;
}
#footer p {
margin:0;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
* html #footer {
height:1px;
}
#footercontent {
margin-left:auto;
margin-right: auto;
width: 940px;
height:126px;
padding:0px;
clear:both;
}
Вот HTML
<body>
<div id="wrap-head">
<div id="header">
<img class="logo" src="logotest.gif" width="280" height="110" />
<ul id="nav">
<li>
<a href="#" title="Return home">HOME</a>
</li>
<li>
<a href="#" title="About the IMHS">ABOUT IMHS</a>
<ul>
<li>
<a href="#">Introduction</a>
</li>
<li>
<a href="#">Mission Statement</a>
</li>
<li>
<a href="#">Member Profiles</a>
</li>
</ul>
</li>
<li>
<a href="#" title="News">NEWS</a>
</li>
<li>
<a href="#" title="Features">FEATURES</a>
<ul>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Book Reviews</a>
</li>
<li>
<a href="#">Monthly Feature</a>
</li>
<li>
<a href="#">IMH Schoolhouse</a>
</li>
</ul>
</li>
<li>
<a href="#" title="News">LINKS</a>
</li>
</ul>
</div>
</div>
<!--END OF NAVIGATION-->
<!--END OF NAVIGATION-->
<div id="wrap-body">
<div id="container">
<div id="content">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3>Consectetuer adipiscing elit</h3>
<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div id="sidebar">
<h2>Column 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
</div>
</div>
<div id="footer">
<div id="footercontent">
<p>aaaaa aaaa </p>
</div>
</div>
</div>
</body>
Спасибо