STYLE SHEETS

Creating an Artistic Blog Header with CSS Sprites

In this fourth part of a seven-part series, I build the header section of a sample blog site. It will use another set of CSS sprites -- or, in other words, a different background image -- to decorate the sections comprising its navigation bar.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 04, 2010

TABLE OF CONTENTS:

Having defined the structure of the sample blog site (at least of its landing page), it’s time to start polishing the visual presentation of each of its primary sections. You may be wondering what the point is in doing this, right? Well, considering that the navigation bar of this blog will have a more “artistic” appearance, it makes sense to style those sections accordingly.

Now that I have explained that, please take a look at the following code fragment, which adds some basic CSS styles to the previous web page:

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

<head>

<title>Artistic 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>Artistic 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 seen before, the core sections that compose the above web page have been provided with an enhanced appearance, thanks to the incorporation of some basic CSS styles. Quite probably the most interesting aspect of this process is the way that the header has been decorated. It uses the following background image, whose actual size has been reduced for editing purposes:

At this point, this sample blog site is starting to take on a more appealing shape, even though the visual presentation of its navigation bar remains undefined. Here, of course, is exactly where CSS sprites will come into play, but the full details of this process will be covered in the next tutorial. So, for the moment, feel free to take a deep breath and read the final thoughts.

Final thoughts

This is it for now. In this fourth installment of the series I built the header section of a sample blog site, which will use another set of CSS sprites -- or, in other words, a different background image -- to decorate the sections comprising its navigation bar.

So far, the only visible trace of the existence of the navigation mechanism is its structural markup, which as you saw before, is made up of a standard HTML list. Nevertheless, this is about to change. In the upcoming tutorial I’ll be creating a whole new background image that will be used to provide the bar with an informal look.

Want to see how this will be done? Then don’t miss the next part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.