STYLE SHEETS

Styling a Blog`s Links Bar with CSS Sprites

In this fifth article of a seven-part series, I demonstrate how to use a set of CSS sprites to define the visual style corresponding to the “normal” state of a navigation bar of a fictional blog site. The most complex facet of this process was to create the background image containing the corresponding sprites; the rest of the procedure merely involves manipulating the image’s X and Y coordinates via CSS.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 05, 2010

TABLE OF CONTENTS:

Before showing you how to use the functionality of CSS sprites for constructing the navigation bar of the blog site, I'd like to spend a few moments reintroducing the source code developed so far. This way you can recall (or learn, if you still haven't read the last tutorial) how the header section of the blog in question was decorated by way of a single background image.

Having clarified that point, here's the web page that partially renders this fictional blog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Sketchy navigation bar using CSS sprites</title>

body {

padding: 0;

margin: 0;

background: #452c0e;

font: 1em Arial, Helvetica, sans-serif;

color: #fff;

}

h1 {

font-size: 2.2em;

}

h2 {

font-size: 1.7em;

}

p {

margin-bottom: 15px;

}

/* main wrapper */

#wrapper {

width: 950px;

margin: 0 auto;

background: #583812;

}

/* header section */

#header {

padding: 20px;

}

/* content section */

#content {

padding: 20px;

}

/* footer section */

#footer {

padding: 20px;

}

/* navbar */

ul#navbar {

width: 950px;

height: 400px;

padding: 0;

margin: 0;

background: #965a19 url("bg_blog_navbar.jpg") top left no-repeat;

list-style: none;

position: relative;

}

</head>

<body>

<h1>Sketchy navigation bar using CSS sprites</h1>

</div>

<li id="about"><a href="#" class="active">About Me</a></li>

<li id="articles" ><a href="#">Articles</a></li>

<li id="search"><a href="#">Search</a></li>

<li id="contact"><a href="#">Contact</a></li>

</ul>

<h2>Main content 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>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you can see, apart from including the typical header, content and footer sections that are so common on thousands of websites, the above XHTML page adds an additional container identified as "navbar." As its name suggests, this div will be used for displaying the CSS sprite-based links bar referenced at the beginning.

But I'm getting ahead of myself, as this topic will be covered in upcoming segments of this article, so for the moment look at the following screen capture, which shows how the "navbar" div looks at this stage:

That's definitely a promising beginning! As shown above, the background of the div has been decorated using a simple wood texture (the actual size of the image has been reduced for editing purposes), which gives it a more artistic appearance. So far, this process hasn't involved the use of CSS sprites at any point, so surely you're wondering where they come into play. Well, with the container of the navigation bar already styled, it's time to decorate its sections, and this will be done by using a new bunch of CSS sprites.

However, the full details of this procedure will be discussed in the following segment. Thus, to learn more on them click on the link below and keep up reading.

Next: Using CSS sprites for styling the normal state of the navigation bar >>