How to code a CSS Sprite Navigation for your website 2/2

In this week’s web design video tutorial we conclude our CSS Sprite Navigation bar tutorial. Last week, we prepared the sprite graphic, that we code in this tutorial. You can find all of the coding used in the video below. To view the live code example – simply click here.

The HTML Code from the video

<ul id="navigation">
    <li class="home"><a href="#">Home</a></li>
    <li class="about"><a href="#">About Us</a></li>
    <li class="chairs"><a href="#">Chairs</a></li>
    <li class="chaises"><a href="#">Chaises</a></li>
    <li class="endofbeds"><a href="#">End of Beds</a></li>
    <li class="stools"><a href="#">Stools</a></li>
    <li class="headboards"><a href="#">Headboards</a></li>
    <li class="faqs"><a href="#">FAQs</a></li>
    <li class="basket"><a href="#">Basket</a></li>
    <li class="checkout"><a href="#">Checkout</a></li>
    <li class="contact"><a href="#">Contact</a></li>
  </ul>

testing

The CSS Code from the video

#navigation { margin:0; padding:0; width:952px; height:37px; background-image:url(withouttext.gif); }

#navigation li { margin:0; padding:0; list-style-type:none; display:inline; height:37px; text-align:center; float:left; line-height:37px; font-family:Georgia, "Times New Roman", Times, serif; }

#navigation a { display:block; height:37px; color:#311f11; text-decoration:none; font-size:13px; }
#navigation a:hover { background-image:url(withouttext.gif); color:#fff; }

#navigation .home { width:71px; }
#navigation .home a:hover { background-position: 0px bottom; }

#navigation .about { width:94px; }
#navigation .about a:hover { background-position: -71px bottom; }

#navigation .chairs { width:76px; }
#navigation .chairs a:hover { background-position: -165px bottom; }

#navigation .chaises { width:84px; }
#navigation .chaises a:hover { background-position: -241px bottom; }

#navigation .endofbeds { width:114px; }
#navigation .endofbeds a:hover { background-position: -325px bottom; }

#navigation .stools { width:74px; }
#navigation .stools a:hover { background-position: -439px bottom; }

#navigation .headboards { width:113px; }
#navigation .headboards a:hover { background-position: -513px bottom; }

#navigation .faqs { width:70px; }
#navigation .faqs a:hover { background-position: -626px bottom; }

#navigation .basket { width:78px; }
#navigation .basket a:hover { background-position: -696px bottom; }

#navigation .checkout { width:96px; }
#navigation .checkout a:hover { background-position: -774px bottom; }

#navigation .contact { width:82px; }
#navigation .contact a:hover { background-position: -870px bottom; }

Hiding the text

As in the video, I also show you how to hide the text, allowing you to use typography that may be flattened onto your Sprite graphic. simply add the following line of CSS:

#navigation li span {display:none; }

And then add Span tags around the text, inside the anchor tags for each of the buttons within your navigation bar. Like in the video, these should be placed like this:

<li class="contact"><a href="#"><span>Contact</span></a></li>