Home arrow Style Sheets arrow Page 3 - Styling Headers, Navigation Bars and More with Image Backgrounds and CSS
STYLE SHEETS

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!

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
June 13, 2007
TABLE OF CONTENTS:
  1. · Styling Headers, Navigation Bars and More with Image Backgrounds and CSS
  2. · Styling the body section of a web page
  3. · Styling a basic header and a navigation bar
  4. · Improving the web page's title sections

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials