STYLE SHEETS

Using Background Images when Matching Web Page Columns with CSS

Building web pages that display completely even main columns is sometimes a pretty cumbersome task. However, if you're a web designer interested in learning how to achieve this neat visual effect with your own web sites using a CSS-based approach, then this series might fit your needs. Keep reading to learn more.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

July 24, 2007

TABLE OF CONTENTS:

Before I start demonstrating how to incorporate an attractive visual effect (like rounded corners, for instance) to an existing fully-leveled web page layout, first I'd like to review the CSS-based approach that I used in the previous article of the series. As you probably recall, it was aimed at displaying the main columns of a specific web document completely matched when using a fixed layout.

Basically, the implementation of the approach can be seen in the following sample file:

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

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{
   clear: both;
   width: 800px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
   background: #eee;
}

#mainwrapper .leftcol{
position: relative;
float: left;
}

#mainwrapper .rightcol{
position: relative;
float: right;
}

#leftbar{
width: 180px;
padding: 10px;
}

#centerbar{
   float: left;
   width: 380px;
   padding: 10px;
   background: #fff;
}

#rightbar{
width: 180px;
padding: 10px;
}

#footer{
   clear: both;
   width: 780px;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   background: #ffc;
}
</style>
<title>Example of evened columns - Fixed Design</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="leftbar" class="leftcol">
      <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="centerbar" class="leftcol">
      <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>
      <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>
      <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="rightbar" class="rightcol">
      <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 you'll probably recall from the prior tutorial of the series, the above example uses a generic containing DIV to wrap all the main bars of the web page, in this way keeping them entirely matched. Besides, you should notice that I used a fixed web page layout, since all the column widths have been specified in pixels.

So far, so good, right? At this point you've certainly recalled how to implement the previous CSS-based approach for matching the main bars of an existing web page. So it's time to move forward and see how to use this same example, but this time incorporating to it some fancy background images.

To see how this process will be performed, please click on the link that appears below and keep reading.

Next: Adding some rounded corners to a web document >>