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. |
