In this first part of a series, we'll start building a stylish navigation bar which uses a combination of image replacement and CSS sprites to define the visual presentation of its sections. The resulting bar will have a clean, professional look that would be at home on any corporate web site.
Building CSS Sprite-Based Navigation Bars - Defining the CSS styles for the normal state of the navigation bar (Page 3 of 4 )
To be frank, I feel a little bit guilty. In the previous segments I made several references to CSS sprites, assuming that you're already familiar with them. If that's not the case, here's a quick explanation of what they really are, so you can understand their underlying logic.
Basically, CSS sprites are a handy technique that permits you to assign different background images to an HTML element (not at the same time, of course) by cleverly manipulating the "background-position" CSS property. Usually, this process requires first creating a single background graphic containing the distinct images that will be assigned to the targeted element, and then altering the X,Y coordinates of the aforementioned property, to reveal only a certain portion of the container graphic.
In this case a picture is worth a thousand words, so let me show you the background image that I'll be using to style the different states of the navigation bar defined in the preceding section. Here it is:
Do you understand how we're using CSS sprites to create all the sections of this navigational bar? I hope you do. As you can see, the above image includes the three states corresponding to every section, that is the "normal," "hover" and "active" states respectively.
You may be wondering what this buys us. Well, first, utilizing only one background image for all the sections demands a single HTTP request to the web server, and second, there's no visible delay when switching over different states of a section. These are definitely two advantages that are worth considering.
Now that I've outlined the logic behind using CSS sprites, it's time to get our hands dirty and start using the earlier background image to build the navigation bar. But before I get to that point, it's necessary to style the other elements of the XHTML document, including the unordered list just created.
The following CSS block performs this task:
body {
padding: 0;
margin: 0;
background: #fff;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#header, #content, #footer {
padding: 30px;
}
/* navbar */
ul#navbar {
width: 780px;
height: 100px;
margin: 0;
padding: 0;
list-style: none;
}
ul#navbar li {
float: left;
width: 130px;
height: 100px;
}
ul#navbar li a {
display: block;
width: 130px;
height: 100px;
text-indent: -9999px;
}
True to form, aside from horizontally positioning the HTML list containing the navigation bar, the above CSS styles are very easy to follow, except for one subtle detail: please, notice the use of simple image replacement method with all the <a> elements, which hides the links' inner text from display thanks to the assignment of a large negative value (-9999px) to the "text-indent" property.
That was the boring part, so let's get to the fun. Having properly positioned the unordered list, we'll now style the "normal" state of each section of the bar. How will we do this? Here's where CSS sprites are put into action! The following CSS code demonstrates this process:
See how easy it is to assign to each section of the navigation bar the desired background image, thanks to the tricky manipulation of the X, Y coordinates of its background-position property? I guess you do! In this case, the entire styling procedure is reduced to assigning the correct values to the coordinates per section being styled and nothing else. It's that simple, really.
And now that the "normal" state of the corresponding sections has been properly defined, the last thing we'll do in this tutorial is include the previous CSS styles in the sample web page.
This will be done in the last section, so click on the link below and read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
