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;
}
h2{
margin: 0;
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#header{
width: 780px;
padding: 20px 10px 20px 10px;
margin-left: auto;
margin-right: auto;
background: #fff url(bgheader.gif) left center repeat-x;
}
#header h2, #header p{
color: #fff;
}
#navbar{
width: 780px;
padding: 25px 10px 35px 10px;
margin-left: auto;
margin-right: auto;
background: #fff url(bgnavbar.gif) left center repeat-x;
}
#navbar ul{
list-style: none;
margin: 0;
}
#navbar li{
display: inline;
}
#navbar a:link,#navbar a:visited{
padding-right: 10px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #039;
text-decoration: none;
}
#navbar a:hover{
text-decoration: underline;
}
#mainwrapper{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#col1{
float: left;
width: 180px;
padding: 10px;
background: #eee;
}
#col2{
float: left;
width: 375px;
padding: 10px;
background: #fff;
}
#col3{
float: right;
width: 180px;
padding: 10px;
background: #eee;
}
#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.
Next: Improving the web page's title sections >>
More Style Sheets Articles
More By Alejandro Gervasio
