Forum Moderators: not2easy
#navigation {
width:800px;
height:auto;
margin:0 auto;
background-color:#999999;
}
#navigation ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#navigation li {
float:left;
}
#navigation a:link, #navigation a:visited {
display:block;
width:120px;
font-weight:normal;
color:#FFFFFF;
background-color:#999999;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#navigation a:hover, #navigation a:active {
background-color:#333333;
}
<div id="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="search_villas.php">Search</a></li>
<li><a href="advertise_villa.html">Advertise</a></li>
<li><a href="login.php">Owners Login</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
Try adding an outer container div to your main navigation bar that will produce the full width background, while the inner div inside is centered with auto margin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>untitled document</title>
<style type="text/css">
#navigation {
background-color:#999;
overflow:hidden;
}
#navigation ul {
float:left;
position:relative;
left:50%;
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#navigation li {
float:left;
display:block;
position:relative;
right:50%;
}
#navigation a:link,#navigation a:visited {
display:block;
padding:4px;
margin-right:2px;
font-weight:normal;
color:#fff;
text-decoration:none;
text-transform:uppercase;
}
#navigation a:hover,#navigation a:active {
background-color:#333;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="search_villas.php">Search</a></li>
<li><a href="advertise_villa.html">Advertise</a></li>
<li><a href="login.php">Owners Login</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
Try adding an outer container div to your main navigation bar that will produce the full width background, while the inner div inside is centered with auto margin.It is certainly an option - but can you explain why you would choose to add an extra html element when the desired visual style should be achievable with the existing elements?
Have you tried removing the width from #navigation (or setting width:100%), and applying the width:800px and margin: 0 auto to #navigation ul instead?
