私は週末のほとんどをこれを修正しようとしてきましたが、うまくいかないようです.私のウェブサイトの基本は完成しています.
ul.nav はすべてのボタンに収まりますが、左側に 10 ～ 15 ピクセルの領域がはみ出しています。ul.navの外。(私は MS Expression Web 4 を使用しています。斜めの赤い線でマークされています。これにより、メニューが正しく整列されなくなり、さらに悪いことに、1024*768 でサイトを表示すると、1 つのメニュー ボタンが他のボタンよりも下に落ちてしまいます。:-(
コンテナー div (コードでは「Div」と呼ばれる) の背景画像は、垂直方向には伸びませんが、繰り返されます。そのように迷惑な線を作成します。伸ばす方法ってありますか？
アドバイスありがとうございます。コードは以下に含まれています。
HTML:
<body>
<div id="container">
<div id="masthead" class="masthead"
onclick="window.location.href='Index.html'"; style="cursor:pointer"></div>
<div id="top-nav" >
<ul class="nav">
<li><a href="#"> Europe </a></li>
<li><a href="ContentNA.html"> N. America </a></li>
<li><a href="#"> S. America </a></li>
<li><a href="#"> Asia </a></li>
<li><a href="#"> Africa </a></li>
<li><a href="#"> Australia </a></li>
<li><a href="#"> Misc </a></li></ul>
</div>
<br />
<br />
<div id="message">
<br clear="all" />
</div>
</body>
</html>
CSS
body {
background-size: 100% 100%;
background-position: center center;
font-family: sans-serif;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
body: ;
background-image: url('BG_MP.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
div {
border-radius: 15px;
border-width: 5px;
border-style: none;
width: 70%;
margin: 50px auto 10px auto;
padding: 10px;
background-image: url('parchment.jpg');
background-size: 100%;
left: auto;
right: auto;
}
#masthead {
border-radius: 15px;
background: transparent;
height: 220px;
width: 650px;
background-image: url('masthead.jpg');
background-repeat: no-repeat;
}
#top-nav {
height: 71px;
background : transparent;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
background-repeat: no-repeat;
text-align: center;
}
ul.nav {
border-radius: 15px;
background : transparent;
height : 57px;
line-height : 31px;
list-style : none;
font-size : 14px;
font-weight: bolder;
display: inline-block
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
font: 100%;
background: transparent;
height : 30px;
font-size : 12px;
color: #000000;
float : left;
padding: 11px 8px 11px 8px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 8px 11px 8px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
#message {
background: transparent;
left: auto;
right: auto;
text-align: center
}