次のコードがあります。
<div id="header">
<h1>HEADER TEXT</h1>
<div id="members">
<form action="" method="post">
<input type="text" value="Search this site" />
</form>
<a href="#">Member Login</a>
</div>
<div id="nav">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
<div id="main">
</div>
</body>
CSS は次のとおりです。
<style>
body {
font-family:Verdana, Geneva, sans-serif;
font-size: 16px;
background-color: #EEE;
color: #111;
margin: 0;
padding: 0;
}
h1 {
display:inline;
margin:0;
padding:0;
color:#000;
}
#header {
position:fixed;
width:100%;
min-width:100%;
background-color:#EEE;
}
#members {
position:absolute;
right:.5em;
bottom:3em;
margin: 0;
padding: 0;
}
#members form {
display: inline;
margin: 0;
padding: 0;
}
#nav {
border-bottom:1px solid #3d5086;
font-size:13px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
height: 3.5em;
border-top: 1px solid #7683c4;
background-color: #44529C;
width: 100%;
min-width: 100%;
overflow: hidden;
}
#nav ul {
padding:0;
margin:0;
}
#nav li {
display:inline;
list-style-type:none;
margin:0;
cursor:pointer;
border-left: 1px solid #7085ba;
border-right: 1px solid #3d5086;
float: left;
height: 2.5em;
padding-top: 1em;
text-shadow: 1px 1px 1px #111;
}
#nav li:hover {
background-color:#5a64b3;
color:#FFF;
}
#nav a {
padding: 1.6em;
color: #EEE;
text-decoration: none;
}
#main {
background:#FFF;
width: 1000px;
height: 1000px;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
</style>
私が抱えている問題は、ウィンドウを十分に小さく縮小すると、#nav のリンクが消え始めることです (または、オーバーフローが非表示になっていない場合は、次の行に押し下げられます)。背景を 100% 拡張する必要があるため、#nav の幅を指定できません。これに対する簡単な修正はありますか？別の小さな問題ですが、ウィンドウが十分に小さく縮小された場合、h1 と #members div が重ならないようにすることは可能ですか? ご提案ありがとうございます。