Accessibility

Dreamweaver Article

 

Tableless Layouts with Dreamweaver 8


Table of Contents

  1. Introduction
  2. Preparing and Creating the Site Structure
  3. CSS Styles Panel and CSS Tools
  4. What to Watch Out For
  5. A Touch of Styling

CSS Styles Panel and CSS Tools

Div elements are like building blocks—but made of clay. You can mold and carve them into the size, shape, and placement you need. In this case, you're going to set a width on the holder div and center it in the browser. You could just as easily leave it left-aligned, but limiting the width of the entire area is sometimes a wise choice for creating a comfortable, readable line length.

Open the CSS panel by selecting Window > CSS Styles if it is not already open. In the CSS panel, click the New CSS Rule button (among the icons at the bottom of the panel, it looks like a page with a plus sign). This brings up the New CSS Rule dialog box (see Figure 4).

The New CSS Rule dialog box

Figure 4. The New CSS Rule dialog box

Although this is unchanged from Dreamweaver MX 2004, before you define the #holder div, you need to define the body element's styling. For Selector Type, choose Tag (so it redefines the look of a specific tag) and then in the Tag text box, either type body or choose it from the pop-up menu. For Define In, choose demo.css from the pop-up menu.

Click OK. The CSS Rule Definition dialog box appears. I always begin by zeroing the margins and padding, and setting my font size, color, and background color. The panes of the CSS dialog box should be fairly self-explanatory, but for this first one I'll point you in the right direction:

Category > Type
     Font: Choose the list beginning with "Verdana, Arial..."
     Size: Type 100 and choose % for the unit of measurement
     Color: Enter #000000
Category > Background
     Background Color: Enter #ADA189
Category > Block
     Text align: Center (to force Microsoft Internet Explorer 5 to comply with the centering)
Category > Box
     Margin: 0 (leave same for all checked)
     Padding: 0 (leave same for all checked)
Click OK.

When you open your demo.css document, you should see a rule something like this:

body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background: #ADA189;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

Notice when you view your index.htm page that your divs now all appear centered. If you've left your CSS Background colors visualization on, you'll also notice that you don't see the background color defined for the page. This feature turns off all background colors because it adds its own. If you want to see the effect that your rules are having, feel free to leave this feature on for now.

Code Hinting

For the #holder div, you'll use another method of creating the rule. This demonstrates how code hinting works. Beneath the body selector in the demo.css file, type #holder {. Beneath that line, type width: 760px;. Notice how Dreamweaver gives you hints based on what you type. When you see the property you need, press Enter; it will put the property and color separator on your page and will then move on to the value hints.

Beneath that line type background: #FFFFFF; and close the rule by typing }. Once a rule is begun in the CSS page, you can use the Properties pane of the CSS panel to edit and add to it.

For this reason, I create my own code snippets for a two-column layout and a three-column layout. They have simply the selector names with curly brackets. This gives me that little start that allows me to edit wherever I'd like. If you like a speedier workflow, snippets are your friend. You can learn more about code snippets in the Dreamweaver LiveDocs, Working with Code Snippets.

The Properties Pane

You'll now complete the rule with the Properties pane of the CSS panel. Click in any of the divs in Design view. Notice that you can see the document tree at the bottom of the document. Depending on the div in which you placed your cursor, it will look something like this: <body> <div#holder> <div#nav>. This handy little tool is called the Tag selector.

Click <div#holder> on the Tag selector. Notice in the Properties pane of the CSS panel that you can see the two property/value pairs you just created. You may need to drag down the panels below the CSS panel to see the Properties pane. You may also need to click #holder in the All Rules pane of the CSS panel to make the holder selector properties appear.

Now add a couple more properties. I keep my Properties pane set to "Show only set properties" so I don't have to scroll through all the unused properties. Click on Add Property. On the left side there will be an input. You can type your property in if you're sure you know the exact label. Or else use the pop-up menu to select it (they're in alphabetical order). Select the text-align: option. Once it's selected, an input appears on the right side. Again, type the value in or select from the possible choices shown in the pop-up menu. Select left.

Finally, click Add Property again and select margin. Notice that you don't get a pop-up menu showing any values. As I mentioned, I prefer shorthand-style CSS because it's so much more succinct. If you can't remember the order to place the shorthand values, don't worry. Dreamweaver reminds you if you hover your cursor over the value input (see Figure 5). Type in 0 auto 0 auto (if you really want to be short about it, 0 auto gives the same results).

Property hinting in the CSS panel

Figure 5. Property hinting in the CSS panel

Back in the demo.css file, your rule should now look something like this:

#holder {
    width: 760px;
    background: #FFFFFF;
    text-align: left;
    margin: 0 auto 0 auto;
}

Let's review the #holder rule and discuss the values given. Since you're centering this page, the div must have a width. Otherwise, as I mentioned earlier, it will be 100% as wide as the body element (which is its parent). The margins given, with both side values set to "auto," is the magical property that forces that #holder to be centered. No matter how wide the browser is, this 760 pixel block will be in the center. Since you gave the overall page a background color, you gave this div a white background for legibility.

Finally, you placed "text-align: center" into the body rule to center this div in Internet Explorer 5 series browsers. Thus, you put "text-align: left" into the holder to bring everything back to the default left alignment.

Defining the Header

There are three more divs to define, which appear below. Feel free to use any of the previous three methods to create these rules. Play around with them and see which works best for you:

#header {
    background: #DCCBAC;
}
#nav {
    width: 140px;
    float: left;
    padding: 15px 10px;
}
#content {
    margin: 0 0 0 165px;
    padding: 15px;
}

Allow the header to stay at 100% of the width of its parent container (the holder div). That means it is also 760 pixels wide. There's no need to define it. Also allow the contents of the header to define its height. In general, this area is used for the company name, logo, and tag line. Many times it will be an image, but I'll use text for this demonstration. Type in a fake company name in a <p> element and remove the placeholder text (see Figure 6).

Three divs defined

Figure 6. Three divs defined

(+) View larger

Now that you've carved and formed the blocks that create your page, view them with the CSS backgrounds again. Turn on the CSS Layout Outlines as well. Notice how the #nav div is now sitting to the left of the #content div. This works because the #nav div is given a width (140 pixels + 20 pixels padding = 160 pixels) and is floated left, and the #content div is given a margin that clears that width. There's now room for them on one line.

Notice that the left margin for the content div is 5 pixels wider than the width of the #nav. I always give the margin values at least 3–5 pixels more than they seem to need because Internet Explorer for Windows sometimes adds a phantom 3 pixels to the value.

If an item is placed in the #content div that is wider than the space provided, the content div will drop to the next line (below the #nav div). This is called float drop and if you'd like to see it in action, simply place an image (or div with a width setting wider than the @content div allows - over 600px) into the #content div and preview it in Internet Explorer. (John Gallant and Holly Bergevin wrote a great series on Community MX about floats and how they work, called Float: The Theory.)

Note: You could absolutely position the #nav div and give the #content div the same left margin to get the same effect. In general, I don't do this because an absolutely positioned div is taken out of the flow of the page so that none of the other elements know of its existence. So if you had a great deal of content in your #nav column, it would simply run off the bottom of the page and not respect the same boundaries that the other divs do. This can be messy, so I don't advise it. For more information on the flow of the document, read John Gallant and Holly Bergevin's article on Community MX, called Flowing and Positioning: Two Page Models.

Page 3 of 5
Previous Page
Next Page