0
コンテナの幅が940ピクセルである間に、ヘッダーとフッターを100％の幅でレイアウトを作成しようとしています。私はブログやニュースのウェブサイトでこれの例を見てきました。含まれているコンテンツをフローティングする代わりに、ページの上部と下部に固定されているように見えます。ブラウザウィンドウのサイズ変更がCSSレイアウトに影響する
また、作成しているウェブサイトには数ページしかないので、ヘッダー内にナビゲーションを配置しました。ナビゲーションは、絶対配置を使用することによって中心に置かれます。
すべてのブラウザでウィンドウを縮小すると、ヘッダーの下のコンテンツをカバーする白い背景が表示される以外はすべてがその場所にとどまります。私はなぜこれが起こっているのかわかりませんが、私はドロップダウンメニューが問題を引き起こしたと思います。おかげ
は、ここに私の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>
おかげ