初めての Web サイトを手作業でコーディングしています。これまでのところ楽しい冒険でしたが、ナビゲーション メニューで CSS の不具合に遭遇しました。これが私の進行中のウェブサイトです。私の 15 インチ ラップトップでは、最初にサイトを読み込むと、予想どおり、ナビゲーション バーがコンテナの全幅 (画面の 80% 幅) まで伸びます。ただし、Web ページをズームしたり、表示したりすると、 screenfly を介してさまざまな解像度を使用すると、ナビゲーション バーがコンテナーを超えて拡張され、ヘッダー イメージも短くなります。
*{ margin: 0 auto;}
body {
background:black;
margin: 0 auto;
font-family:georgia, times,serif;
}
#outer-content-wrapper{
position:relative;
height:100%;
width:80%;
margin:0 auto;
}
#navwrap{
margin:0;
height:60px;
width:100%;
}
#nav{
position:relative;
background:black;
height:60px;
width:100%;
border-top-style:dashed;
border-bottom-style:dashed;
border-width:1px;
border-color:#696969;
z-index:9000;
}`
<div id="outer-content-wrapper">
<div id="header">
<div id="greenlight"></div>
</div>
<div id="navwrap">
<div id="nav">
<div id="logo"></div>
<div class="menu">
<div class="pagesmenu">
<ul>
<li><a href="#bio">bio</a></li>
<li><a href="#music">listen</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="http://blog.danielLmusic.com">blog</a> </li>
</ul>
</div>
平和