Dreamweaver Article

Working with Background Images and CSS – Part 4: Using Images to Mimic the Appearance of Columns

Note: This article has been updated for Dreamweaver 8.

In the first three parts of this series, I reviewed how to set a background image. I covered using keywords, multiple keywords, and measurement values for precise positioning. These are the basics of using background images, and it is necessary to understand these concepts to correctly implement the CSS required for setting your images.

In this part of the tutorial, you learn how you can fake the appearance of columns in your CSS design. When you design with CSS, each of the divs in your page responds to the amount of content that they contain; this can be problematic when you want to create the appearance of equal-length columns. In this tutorial I will show you how you can overcome these problems in a fixed-width design.

You create a two-column layout with an absolute-positioned navigation div. An absolutely positioned navigation div gives you an advantage that you can have your main content underneath the body tag for indexing. The trade off is that you cannot clear an absolutely positioned div so you will need to ensure your content div is taller than your navigation div.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8

• Try
• Buy

Fireworks 8

• Try
• Buy

Sample files:

• css_image_samples4.zip (ZIP, 28K)

I have included the PNG file of the drawing you use in this tutorial and the completed page that you create during this tutorial. You can of course create these files as you work along with the tutorial or you can use the files from within the download to follow along by reading the code as it is written in the tutorial.

Prerequisite Knowledge

Part 1, Part 2, and Part 3 of this series, a basic knowledge of working with Dreamweaver and Fireworks, and Lorem Ipsum Generator extension by Technocurve (optional).

Page 1 of 4

Next Page

About the author