集装箱外的菜单/背景图像垂直拉伸

我一直在努力修复这个周末的大部分时间，但我似乎无法得到它的权利，我的网站的基础知识已完成，但对于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