Home arrow Style Sheets arrow Page 4 - 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 - Improving the web page's title sections
(Page 4 of 4 )

As I stated in the section that you just read, the last example that I'm going to teach you will demonstrate how to style the different title sections of the same web page that you saw before, using a simple background image.

More specifically speaking, this is the image that I'm going to utilize to style the mentioned web page titles:

As you can see, the previous background picture is only 1px in width too, and not surprisingly, it will be utilized with the same sample (X)HTML file that was created previously in the following way:

<!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;
  
background: #fff;
}

#col1{
  
float: left;
  
width: 180px;
  
padding: 10px;
  
background: #fff;
}

#col2{
  
float: left;
  
width: 375px;
  
padding: 10px;
  
background: #fff;
}

#col3{
  
float: right;
  
width: 180px;
  
padding: 10px;
  
background: #fff;
}

#footer{
  
clear: both;
  
width: 780px;
  
padding: 10px;
  
margin-left: auto;
  
margin-right: auto;
  
background: #eee;
}

.title{
  
padding: 8px 0 6px 10px;
  
font: bold 12px Arial, Helvetica, sans-serif;
  
color: #fff;
  
background: #fff url(bgtitle.gif) left center repeat-x;
}
</style>
<title>Example of table-less web page layout - Styled header - navigation bar and titles</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 class="title">This is the left column</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 class="title">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 class="title">This is the right column</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 demonstrated above, I used a brand new background image to style the respective title sections of the sample web document, in this way providing it with the following look and feel:

At this point, and having studied all the hands-on examples that I provided you in this tutorial, hopefully you'll have a clearer idea of how to use simple background images to dramatically change the visual appearance of any web document. If you're interested in testing the examples on your own browser, you may want to download the corresponding supporting material from the beginning of this article.

Final thoughts

Sadly, we've come to the end of this series. If you're a web designer who's taking those first steps in mastering the manipulation of background images with CSS, hopefully the practical examples included here will be quite useful to you.

See you in the next web development tutorial!


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.

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