集裝箱外的菜單/背景圖像垂直拉伸

我一直在努力修復這個週末的大部分時間，但我似乎無法得到它的權利，我的網站的基礎知識已完成，但對於2件事：集裝箱外的菜單/背景圖像垂直拉伸

ul.nav適合所有的按鈕，但是，10-15像素區域伸出到左側。出ul.nav。（我使用MS表達式Web 4，它用紅色的對角線標記，它阻止菜單正確對齊，更糟糕的是，當以1024 * 768查看網站時，它會導致一個菜單按鈕下降到其他菜單按鈕之下。:-(
的背景圖片爲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

}

來源

2013-08-18 user2692536