Currently, I am facing an issue with my layout where a container div is set to a width of 910px and contains an image of the same size. Below the image, there is a navigation bar made up of an Unordered list with links that change color on hover. For reference, you can view a demonstration here.
The problem arises as the navigation bar is not aligning properly underneath the image. It appears slightly off to the right and the links are not centered. Additionally, the width of each link is insufficient, causing the last link to wrap under when extended.
I am puzzled as to why the links are not centered and why they do not fit within the 910px container.
Below is the code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>This Page needs a Title</title>
<style type="text/css">
#navbar ul {
background-image: none;
padding-top: 17px;
padding-bottom: 10px;
}
#navbar ul li {
font-family: Arial, Helvetica, sans-serif;
display: inline;
}
#navbar ul li a {
color: #FFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
padding-top: 10px;
padding-right: 23px;
padding-bottom: 10px;
padding-left: 23px;
background-color: #0085D7;
}
#navbar ul li a:hover {
background-color: #0085D7;
}
#container {
width: 910px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#bg {
background-image: url(images/Navbar.jpg);
background-repeat: repeat-x;
height: 47px;
background-position: 0px 0px;
z-index: -1;
position: absolute;
width: 100%;
margin-top: 55px;
}
</style>
</head>
<body>
<div id="bg"></div>
<div id="container">
<img src="images/block.jpg" width="910" height="39" />
<div id="navbar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">ADD TO FAVORITES</a></li>
<li><a href="#">DELIVERY & RETURNS</a></li>
<li><a href="#">FEEDBACK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</body>
</html>
Your insights would be greatly appreciated! :)