Creating a simple three-column design with CSS and Dreamweaver 8

Entering faux columns

Are you old enough to remember when faux painting in homes was all the rage? Perhaps I'm dating myself. But I remember when it was cool to use painting techniques to make it appear as though there was a window where one didn't exist, or a table with a vase or a myriad of other fun effects. You'll do something similar here. Only instead of using paint, you'll use an image. You can do this portion of the tutorial in either Fireworks or Photoshop. Or you can use the completed faux.gif image contained in the images folder inside the finished_site folder within the sample files linked to at the beginning of this article. I'll be using Fireworks.

Since the holder controlling the web page's width is 760 pixels wide, create your canvas at the same width. This will be a repeating slice, so you can keep it to about 10px high. One reason I love Fireworks so much is its vector ability. Select the color of your left column divider (#877D6C) and draw a line 165px from the left side. If you're a little off, you can simply type 165 in the "X" input of the Property inspector to place it exactly. Now, using the color of your right column (also #877D6C in this case), draw a rectangle 160px wide and position it at the far-right side of your canvas. Select gif in your optimize palette and export the image as faux.gif into the images directory of your site definition.

Tip: The values used for the delineating line and background color could have varied anywhere from 160px (the outer column's actual width) to 165px (the amount of margin on the #content div). I chose to match exactly what I had previously shown in the design, so I used the #content div's margin amount on the left (since the border was placed on the #content div) and the width of the right column on the right (since the background was placed on the right column itself).

Now you'll work the real magic. Go to your CSS document, find the #holder div, and add this value to your background property:

background: #FFFFFF url(images/faux.gif) repeat-y;

Tip: If you're unfamiliar with the repeat-y portion of that value, it's simply telling the graphic to tile on the y axis (or top to bottom).

Refresh the page in your browser for the full effect. Notice how the columns now go the full length of the page (see Figure 8)? In fact, they run right through the footer (if you removed the color of the header, you would see them there as well). This is because you've placed the graphic on the #holder div. Any element without a background color of its own declared will show this image. In some designs, you may choose to leave the #footer transparent and simply give it margins that match the #content div, keeping the text right in the center. Other times, as I'll demonstrate in a moment, you will give it a different background color. For now, it's obvious you can remove the border and background from the #news div and remove the border-left from the #content div. They are no longer needed.

Figure 8. The columns now go the full length of the page

Smoothing out the footer

Place your cursor in the #footer div in the Design view portion of the window. Go to the Rules pane of the CSS panel and choose #footer (or choose it on the tag selector at the bottom of your window). Click Add Property in the Property pane of the CSS panel. Type in Background or choose it from the pop-up menu and click Enter. Your cursor will move to the value portion—type in #FFF and hit Enter (Return) again. If your CSS page is still open like mine, you'll need to save it before the changes will appear in Design view or when previewing in your browser (see Figure 9).

Tip: If you're unsure of how hexadecimal (hex) color shorthand works, use the following key. Color values with three identical characters are simply doubled. #FFFFFF becomes #FFF; #000000 becomes #000. This is because the first two characters of the color formula represent red, the second two represent green, and the final two represent the blue portion. Thus, hex numbers like #00FF00 or #993366 become #0F0 or #936, respectively. Hexadecimal colors with nonidentical RGB characters, like #822B56 or #ADADAD, cannot be shortened.

Figure 9. Adding the background property to the #footer div to correct the footer

Page 5 of 7

Previous Page

Next Page