Question

I’m trying to get the nav-bar to position over the image using CSS. Yet, I cannot seem to get the position right, what keeps happening is that the first 200px of the image keep showing up instead of the next 200 px from the background positioning, if that makes any sense. Here is the code please help.

HTML:

<div id="topnav">
  <ul>
    <li id="nav-home"><a href="index.html">Feature Product<span></span></a></li>
    <li id="nav-all"><a href="shop_owners.html">All Products<span></span></a></li>
    <li id="nav-how"><a href="all_products.html">How It Works<span></span></a></li>
  </ul>
</div>

CSS:

#topnav {
  position: relative;
  left: 150px;
  top: 100px;
  margin: 0;
  padding: 0;
  height: 50px;
}

#topnav ul {
  list-style-type: none;
  text-align: center;
  line-height: 50px;
}

#topnav ul li {
  float: left;
}

#topnav ul li a {
  background: url(../nav-bar-2.png);
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  position: relative;
}

#nav-home {
  width: 200px;
}

#nav-all {
  width: 200px;
  background-position: -200 0px
}

#nav-how {
  width: 200px;
  background-position: -400px 0px
}

#topnav ul li a span {
  background: url(../nav-bar-2.png) no-repeat scroll bottom left;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 100;
}

#topnav li a span:hover {
  cursor: pointer;
}

#nav-home span {
  background-position: 0px -50px
}

#nav-all span {
  background-position: -200 -50px;
}

#nav-how span {
  background-position: -400 -50px;
}

Answer 1

I think this is the problem:

#nav-home{width:200px;}
#nav-all{width:200px; background-position:-200 0px}
#nav-how{width:200px; background-position:-400px 0px}

The code for the second and third elements moves the background image 200px and 400px to the left, respectively. However, #nav-all and #nav-how have no background image, as the only place you have set one is on the link and the link and the span inside of those li elements.

Try making this change:

#topnav ul li {background:url(../nav-bar-2.png); // a was removed from end of list

Now that the background image is on the li element, the css code it has can move it the correct number of pixels to the left. (I almost always specify what tag an id applies to in CSS as it can help reduce this problem, at least in non-production code. This means you would use li#nav-home and li#nav-all to help you know exactly what element the id applies to).

---

Also, don’t omit px on length values that are intended to be in pixels. While some browsers use px as the default length, its much better not to rely on this behavior and just explicitly state the unit as being in px. 😀