Pregunta
I've been trying to fix this most of the weekend, but I can't seem to get it right, the basics of my website are complete, but for 2 things:
The ul.nav fits all of the buttons, however, a 10-15 pixel area is sticking out to the left. out of the ul.nav. (i'm using MS expression web 4, it's marked by diagonal red lines. It prevents the menu to align correctly, and worse, it causes one menu button to drop below the others when viewing the site in 1024*768. :-(
The background picture for the container div (called "Div" in the code) does not stretch vertically, but repeats itself. It creates annoying lines that way. Is there a way to make it stretch?
Many thanks for your advice. The code is included below.
The HTML:
https://stackoverflow.com/questions/18300657
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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>
The 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
}
Solución
To fix the extra 10-15px spacing issue, add padding:0; to ul.nav
As for the repeating background of div, add the two lines that you used to do the same thing in body to it: add background-repeat: no-repeat; background-attachment: fixed; to div's CSS
