Question

我一直在努力解决这个周末的大部分时间，但我似乎无法做到正确，我网站的基础知识已经完成，但有两件事：

ul.nav适合所有按钮，但是，10-15像素区域向左伸出。超出ul.nav。（我正在使用MS表达式web 4，它用对角红线标记。它会阻止菜单正确对齐，更糟糕的是，当在1024 * 768中查看网站时，它会导致一个菜单按钮低于其他菜单按钮。:-(
容器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

}

Answer 1

要修复额外的10-15px间距问题，请将padding:0;添加到ul.nav

至于div的重复背景，添加你在身体中做同样事情的两行：将background-repeat: no-repeat; background-attachment: fixed;添加到div的CSS

jsFiddle with the implemented changes

容器外的菜单/背景图像垂直拉伸

1 个答案: