Forum Moderators: not2easy
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
}
body {
background-attachment: fixed;
background-color: #FFFFFF;
background-image: url("wood.jpg");
font-family: Arial,Helvetica,sans-serif;
font-size: 0.8em;
}
body {
display: block;
margin: 8px;
}
#Container {
background-image: url("headerImage.png");
}
#Container {
background-position: 50% 0;
background-repeat: no-repeat;
}
#Container {
margin: 0 auto;
width: 958px;
}
#TopMenu {
background: url("top.png") repeat-x scroll 0 0 transparent;
height: 42px;
}
#TopMenu {
height: 30px;
padding: 5px 0 0 0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xml:lang=en lang=en xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Free Shipping</title>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8"/>
</head>
<body>
<div id=Container>
<div id="TopMenu">
<ul style="display:">
<li>Menu Item</li>
</ul>
</div>
</div>
</body>
</html>
[edited by: alt131 at 10:18 pm (utc) on Jul 15, 2011]
[edit reason] Thread Tidy [/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Free Shipping</title>
<style type="text/css">
* {/* better to use a small reset rather than this */
margin: 0;
padding: 0;
}
body {
background:#fff url("wood.jpg") fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
line-height:1.3;
padding:8px;
}
#Container, #TopMenu ul {
margin: 0 auto;
width: 958px;
}
#TopMenu {
background:green url("top.png") repeat-x 0 0;
height: 42px;
line-height:42px;/* center text vertically in height*/
}
#TopMenu ul {
background:blue url("headerImage.png")no-repeat 50% 0;
list-style:none;
height: 42px;
padding:0;/* list have default padding and default margins depending on browsers so remove them both*/
}
#Topmenu li{float:left;}
</style>
</head>
<body>
<div id="TopMenu">
<ul>
<li>Menu Item</li>
</ul>
</div>
<div id="Container">
<p>stuff here</p>
</div>
</body>
</html>
Hard to tell if this is what you mean as there is no mention of green in the code aboveGood point Paul. In fairness to envirosurfer, the direct reference got lost when I brought the code back. Your solution fixes that by setting green as the background-color to #TopMenu - thanks :)
