Home arrow Style Sheets arrow Page 2 - 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 the body section of a web page
(Page 2 of 4 )

Before I begin explaining how to use a few basic background images to give an attractive style to the different elements of a given web page, I'd like to refresh your memory of the CSS-based technique that I used in the previous tutorial. It was useful for styling the <body> section of the page in question.

As you'll probably recall from that tutorial, the sample web document that I coded previously had a classic three-column layout and presented the following structure:

<!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: 10px;
  
margin-left: auto;
  
margin-right: auto;
  
background: #ffc;
}

#navbar{
  
width: 780px;
  
padding: 10px;
  
margin-left: auto;
  
margin-right: auto;
  
background: #fc0;
}

#navbar ul{
  
list-style: none;
}

#navbar li{
  
display: inline;
  
padding-right: 4%;
}

#navbar a:link,#navbar a:visited{
  
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 - Background image
with (repeat-y) property</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">
   
<h2>This is the navigation bar of the web page</h2>
   
<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>

As illustrated above, the previous sample (X)HTML file used a small, horizontally-tiled background image, which was tied to the respective <body> selector, in this way achieving the visual appearance demonstrated by the screen shot below:

As you can see, the look and feel provided to the prior web document is acceptable, particularly taking into account that it's been generated by a small background image, like the one shown below:

All right, after studying the previous example, surely you'll have to agree with me that improving the visual presentation of any web document using basic background images is indeed a process that can be performed with minor hassles. As you saw, this procedure is reduced to creating the image in question and tiling it vertically or horizontally, in accordance with the structure of the element to be styled.

Having explained how to modify the overall appearance of a specific web document via a few simple CSS-tiled images, it's time to leap forward and see how this same technique can be used for improving the look and feel of the respective header and navigation bar included in the sample (X)HTML that you learned before.

Do you want to see how this interesting task will be performed? Okay, click on the link that appears below and keep reading.


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