Styling Headers, Navigation Bars and More with Image Backgrounds and CSS
Tiling background images with CSS is a simple technique that can make your web pages look much more attractive to your web site's visitors. If you're interested in learning how to put this popular approach of modern web design to work for you in no time, then you should start reading this article now!
Styling Headers, Navigation Bars and More with Image Backgrounds and CSS - Styling a basic header and a navigation bar (Page 3 of 4 )
As you might have guessed, styling the header section and the navigation bar included in the sample (X)HTML file that you learned earlier is a procedure that is closely similar to the one discussed in the previous section. It relies upon using two different background images, which will be tiled horizontally within the aforementioned web page elements.
In this case I'm going to use a pair of simple background pictures, which are show below:
As you can see, the background images are only 1px in width; they will be tiled horizontally across the respective header and navigation bar of the sample web document shown in the prior section. Now that I have explained how I plan to use these basic pictures, please take a look at the following example, which obviously includes the mentioned images into the corresponding web page via some basic CSS styles:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso- 8859-1" /> <style type="text/CSS"> body{ padding: 0; margin: 0; background: #666 url(bgpage.gif) center top repeat-y; }
#footer{ clear: both; width: 780px; padding: 10px; margin-left: auto; margin-right: auto; background: #ffc; } </style> <title>Example of table-less web page layout - Styled header and navigation bar</title> </head> <body> <div id="header"> <h2>This is the header section of the web page</h2> <p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p> </div> <div id="navbar"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </div> <div id="mainwrapper"> <div id="col1"> <h2>This is the left column of the web page</h2> <p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p> </div> <div id="col2"> <h2>This is the center column of the web page</h2> <p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p> </div> <div id="col3"> <h2>This is the right column of the web page</h2> <p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p> </div> </div> <div id="footer"> <h2>This is the footer section of the web page</h2> <p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p> </div> </body> </html>
In this case, the previous (X)HTML file incorporates two new CSS declarations to the existing visual styles to improve the visual appearance of its header section and navigation bar. These declarations are very simple to follow; their respective definitions are listed below:
#header{ width: 780px; padding: 20px 10px 20px 10px; margin-left: auto; margin-right: auto; background: #fff url(bgheader.gif) left center repeat-x; }
#navbar{ width: 780px; padding: 25px 10px 35px 10px; margin-left: auto; margin-right: auto; background: #fff url(bgnavbar.gif) left center repeat-x; }
As you can see, these two brand new CSS styles are aimed specifically at styling the corresponding header section and navigation bar of the sample web page, naturally using the pair of background images that you saw a few lines above. Quite simple, right?
That being said, here's a screen shot that shows the improved look and feel provided to the sample web page, including its styled header and navigational section:
Well, if you take a closer look at the above picture, you'll have to admit that the original appearance of the sample web document has changed noticeably, considering that this process only required the creation of three basic background images. Not too bad, right?
So far, so good. At this moment you hopefully grasped the logic that drives the utilization of lightweight background pictures to style the different elements of a given web page. So what is the next step? Well, provided that the previous web page already has a decent look and feel, in the last section of this tutorial I'm going to give it a final touch by styling its corresponding title sections, thus completing its styling process via the CSS specification.
To see how the visual appearance of the title sections corresponding to the sample web page will be improved, jump ahead and read the next few lines. I'll be there, waiting for you.
Style Sheets 
Adding Headers and Footers with DIV-Based CSS Tables
