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

More faux image techniques

Let's look at one more technique before I close this tutorial. I'm not going to create a glorious design for you—that's your job. I am going to show you a proof of structural concept and you can take it from there. You and I know that we have a straight header across the top: three columns and a footer. But your client and surfer don't need to realize it's that "boxy." Why not make your right column appear to extend up into the top header area—as if it overlaps? Faking them out is simple.

Once again, I opened Fireworks and created a canvas 162 x 43 pixels. This gives me just a touch more room than my third column, so I can work. For illustration purposes, I used the "Chamfer rectangle" autoshape in the same color as the column and set it to be 160px wide. You can use any shape you like to finish off the top of your column—just be sure it's ultimately160px wide to get a perfect match. Export it as dec_top.gif into your image directory as a transparent GIF with the matte set to the header color (for this example, that's #DCCBAC). Or you can use completed dec_top.gif image contained in the images folder inside the finished_site folder within the sample files linked to at the beginning of this article.

Now back to Dreamweaver. In your CSS document, take a look at the #header div. Currently, there's a background color only:

background: #DCCBAC;

Let's add the faux column top by placing the URL value there, set it not to repeat, and place it at the bottom right of that div. Using this technique, no matter how tall the header is (if someone is surfing with the text size set at a larger default size, the header will increase in height), it will appear to connect with the right column and overlap the header. Change the background value to the following:

background: #DCCBAC url(images/dec_top.gif) no-repeat bottom right;

Refresh your browser and have a look at the top right area (see Figure 14). See how the column appears to move up seamlessly? Think of the possibilities!

Figure 14. Adding a faux column top

You can use a similar technique to make the header appear to have a curved bottom—but instead, you actually place the background image on the #content div. Or you could put a top and bottom shadow or gradient on an element without a specified height and make it appear to stretch to any height. "But," I hear you say, "you can't put two background images on one element." Right, but every good client-side developer will have their ways to make creative designs work. Due to space limitations, those styling tricks as well as some creative navigation ideas will have to wait for another tutorial.

If You Need to Hack IE

There is the possibility that even though in this layout, you don’t have any Internet Explorer bugs, you might encounter them through an element or some styling added in your own layout. Position is Everything and Community MX have chronicled many of these IE bugs, and with the looming IE 7 release, there’s a simple fix for many of them. Many of the bugs you’ll run into are based on the fact that IE requires an element to have “hasLayout” (You can read more about this IE-only property in this excellent article by Ingo Chao). Currently, the fix for this issue is best handled using another proprietary IE property—zoom. This property, placed in an IE conditional comment (or a style sheet brought into the page with an IE Conditional Comment), will fix a multitude of IE sins. Placed in an IE conditional comment, it will also allow your page to pass validation if you desire.

<!--[if IE]>
<style type="text/css">
#content { zoom: 1; }
</style> 
<![endif]-->

Commenting for clarity

I'd like to leave you this time with a tip I've found to be extremely helpful to my CSS development: commenting. I make use of it both in my XHTML and in my CSS. In the XHTML, I place a comment before the close of each div. This not only makes it easier during development, but it also gives me a real boost when I go back to work on the site at a later date. My reason for placing the comment before the close of the div instead of after is that, if I remove an entire div, the comment will be removed with it. If I place it after the close of the div, it could be left in the document—and later it could get rather confusing with rogue comments. I use the following:

<!-- close of news --></div>

Another place I make use of comments is in grouping the general sections of my CSS, as well as any selectors or declarations that have something different about them. That is, anything unique that I might forget later. Never for a minute think you'll remember why a selector or value is in your style sheet after you've coded 14 new sites since that one. Take advantage of comments to remind yourself. (You can see the method I use in the final files included with this tutorial.)

Until next time, happy coding...

Where to go from here

For more tutorials on CSS in Dreamweaver, visit the CSS page in the Dreamweaver Developer Center and the CSS tutorials on Community MX.

Page 7 of 7

Previous Page