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 navigation bar's structural markup (Page 2 of 4 )
To start demonstrating how a balanced combination of image replacement and CSS sprites can be of great help in building an elegant navigation bar, we must start by defining the bar's structural markup. Since my goal here is to create an attractive navigational mechanism that also offers a decent level of accessibility, its bare bones structure will be comprised simply of an unordered list and a few additional items.
Having explained that, here's the web page that will contain the corresponding HTML list:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
The previous (X)HTML document defines the typical header, content and footer sections that are so commonly seen on any website. However, the most interesting of these three areas is certainly the header. It houses a standard unordered list, which will be the building block of the navigation bar discussed in the introduction.
For demonstrative purposes the list in question only includes a few hyperlinks, such as the ones that point to the "Services," "Products" and "Contact" sections of a fictional website. Naturally it's possible to add extra items in accordance with more specific requirements. In addition, you may have noticed that the link within the "About Us" section has been assigned a class named "active." The reason to assign this class is to indicate visually to users which section they're currently viewing, so for now don't be too concerned about the rationale behind coding this class.
So far, so good. At this stage things look pretty good, since the structure of the navigational bar that I plan to build is based on clean, standard markup. So, what's the next step? Well, with the skeleton of the bar already set up, now we need to create the CSS styles that make it look really stylish.
Here's where CSS sprites will come into play, but the full details of the styling process will be discussed in the following segment. Therefore, click on the link below and keep reading.
Style Sheets 
HTML5 Boilerplate Introduction
