Using multiple layout options

Multiple layouts in a single CSS file are achieved by the clever use of descendant selectors to isolate one CSS rule from another. The parent element of these descendant selectors is set on the body tag in the form of a class; it is this class that controls when a CSS rule is applied and when it isn't. Take a look at one particular rule that appears in the layouts you will utilize in this tutorial.

.oneColLiqCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
}

Listing 1. The #mainContent descendant selector

Listing 1 above, is, as I'm sure you know, a descendant selector. A descendant selector consists of two or more selectors (in this case you have a class and an ID selector), and the values within the CSS rule will only be applied when #mainContent is a child of the .oneColLiqCtrHdr class.

Note: Each of the classes used in the descendant selectors is an abbreviation of the layout type of the page.

The element to which the #mainContent rule refers is the main content container within your design; the class in the descendant selector would be applied to the body element. This means that only when the body element (All such descendant selectors in the CSS layouts have the class set against the body) has a class of .oneColLiqCtrHdr set against it will the values for the #mainContent div be applied.

.twoColLiqRtHdr #mainContent { 
margin: 0 26% 0 10px;
}

Listing 2. A different version of the #mainContent descendant selector

The descendant selector in Listing 2 works in exactly the same way as explained earlier. However, the name of the class has changed, and the properties and values for the #mainContent rule have also changed. In this instance the #mainContent values are allowing for a right-hand column to sit next to the mainContent area. The space to the right of the mainContent area where the column will sit is provided by the right margin value of 26%.

By using this technique you can easily change values on any given element to accommodate added or removed elements that may appear around it from page to page. For a deeper explanation of descendant selectors, please read this article I wrote: Defining and using Descendant Selectors. In short, the descendant selector enables you to manipulate your page layout easily by simply changing the class against the body. Sound complicated? Well, it isn't, really; but you will be delighted to hear that Dreamweaver CS3 controls all this for you automatically without you ever having to look at a descendant selector, never mind edit one!

Page 2 of 3

Previous Page

Next Page