Ok, so I'm designing this site and for some reason I can't get this standard CSS list navigation menu to sit in the white DIV container. It should be a simple fix, but I can't work it out. I'd appreaciate it if you guys had a look at it and see if you can work it out.
The page is located here: http://diddy29.110mb.com/cr2/index.html
For your quick references, the HTML:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html lang="en" xml:lang="en">
<head>
<title>Home | Essential Self Solutions</title>
<link media="all" type="text/css" href="mainstyle.css" rel="stylesheet" />
</head>
<body spellcheck="false">
<div id="WhiteWrapper">
<div id="ContentWrapper">
<div id="Header">logo</div>
<div id="navcontainer">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Feel The Fear Workshops</span></a></li>
<li><a href="#"><span>Other Workshops</span><!--</a--></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
And the CSS:
Code:
body {
background: #444444;
margin: 0;
padding: 0;
}
div#WhiteWrapper {
background: #ffffff;
width: 950px;
margin: 0 auto;
padding: 0 auto;
}
div#ContentWrapper {
background: #ffffff;
border: 1px solid black;
margin: 0 auto;
padding: 0px 20px 0px 20px;
width: 700px;
}
div#Header {
width: 100%;
clear: both;
margin-bottom: 30px;
}
div#navcontainer ul
{
margin: 0 0 10px;
}
div#navcontainer ul li
{
list-style-type: none;
display: block;
float: left;
margin: 0 10px 0 0;
}
div#navcontainer ul li a,
div#navcontainer ul li a:link,
div#navcontainer ul li a:active,
div#navcontainer ul li a:visited
{
display: block;
width: 180px;
height: 50px;
background-image: url(nav1.png);
text-decoration: none;
}
div#navcontainer ul li a:hover
{
display: block;
width: 180px;
height: 50px;
background-image: url(nav2.png);
text-decoration: none;
}
div#navcontainer ul li a span
{
display: block;
padding: 20px 0;
text-align: center;
color: #ffffff;
font-family: arial;
font-size: 15px;
font-weight: normal;
}