Nav bar not lining up with image inside container

StackOverflow https://stackoverflow.com/questions/21977200

  •  15-10-2022
  •  | 
  •  

Question

So my problem is that I have a container div that is 910px wide, with an image inside that is also 910px, along with a Nav bar underneath the image that doesn't seem to line up properly. My nav bar is made from an Unordered list where each link background changes colour when hovered over, for demonstration purposes ill have them constantly highlighted as seen here: http://i.imgur.com/hsQAXHs.jpg

My problem is that I want my nav bar to line up directly underneath the image, where as it seems to be slightly off to the right. As well as the nav bar not being centred, the width of each link isnt long enough, though if I make them any longer they don't fit in the 910px container and the last link on the right gets wrapped underneath.

I don't understand why my links aren't centred and why they are not fitting correctly in my 910px container.

Here is my code:

<!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>

Thank you! :)

Was it helpful?

Solution 

#navbar ul {
  padding: 0;
  background-image: none;
  padding-top: 17px;
  padding-bottom: 10px;
}

Try zeroing out the padding as I have on line 1 before declaring your padding top and bottom. I think you might be seeing some browser specific styling that is applied to any ul element.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top