8.3 Creating CSS Styles for Layers

After you've determined the size and position of a layer, you create a CSS Style. The process is the same as with any style, with just a few exceptions. First, create a new style. For example, click the New Style button on the CSS Styles panel (see Figure 6-1) or use one of the other methods described in Section 6.2 to open the New CSS Style window (see Figure 8-1).

In the New CSS Style window, choose a selector type. In most cases you'll use an advanced type of style known as an ID, which is a special type of style that identifies a unique item on a page. For example, a Web page usually has only a single banner, a single left-hand sidebar, or a single footer. Each of those elements would get its own ID style.

Unlike a class style, you can apply an ID style only once per page. Since an ID defines a layer with a specific position on the page, you probably wouldn't want to apply it to more than one element on a page anyway. Otherwise, both items would be on top of each other in the same place!

ID styles have another benefit as well: you can use them with JavaScript programming. ID styles (which identify layers) provide a method for JavaScript to "talk" to the layer. You can move layers with JavaScript, hide and show them, or even animate them across the screen. In this way, an ID style is like the name you give to an image so Dreamweaver's Rollover Image behavior can identify and manipulate the image (Section 5.6). In fact, Dreamweaver comes with several preprogrammed JavaScript routines for these kinds of effects (see Section 12.4.5).

To create an ID style, choose Advanced from the Selector Type list in the New CSS Style window (see Figure 8-2). Type a name for the style in the Selector box at the top of the window. But to identify the style as an ID, you must precede the name with the pound symbol like this: #banner. From this point on, the process is the same as any other style: choose whether to include the style in an external or internal style sheet (Section 6.1.2), then click the OK button to open the CSS Style Definition window and begin setting CSS properties (see Figure 8-3).

Creating an ID style is as simple as creating any type of CSS style. But make sure you select the Advanced option and precede the name of the style with the # symbol. Unlike with class styles, Dreamweaver won't check to make sure you've used the correct syntax for the style's name.

UP TO SPEED A Wealth of Resources at Your Mouse Tip CSS-based layouts can be complex, and the more complex your design, the more you may find yourself yanking handfuls of hair from your head as you struggle with your style sheets. The subject is worthy of an entire book (or two...or three). Fortunately, you can find lots of Web sites to help steer you in the right direction, including: Join the CSS Layouts Discussion at: css-discuss.incutio.com/?page=CssLayouts Bone up on CSS Layout Techniques at: www.glish.com/css/ Check out the design samples at Little Boxes: www.thenoodleincident.com/tutorials/box_lesson/boxes.html Or dive into The Layout Reservoir at: www.bluerobot.com/web/layouts/ And if you want to skip all this learnin' stuff, a Web site wizard called Layout-o-matic can generate the basic CSS and HTML code for a variety of simple layouts. Visit www.inknoise.com/experimental/layoutomatic.php . Just pick your desired layout options, and the site will produce ready-to-use CSS and HTML code.

8.3.1 The CSS Positioning Properties

A layer can use any CSS-style property. For example, you can use the Background Color property (Section 6.7.2) to give the layer a background color, put a colorful border around the edges of the layer, or set the Font Family property to display all text inside that layer in Arial. (These properties are all described in Chapter 6.) But there are also some properties specific to positioning layers on a screen, found under the Positioning category of the CSS Style definition window (Figure 8-3).

The Positioning category of the CSS Style definition window lets you set the properties necessary to accurately place content on a Web page.

8.3.1.1 Positioning Type

There are three available position types: absolute, relative, and static. Each type affects how a layer is positioned on the screen.

• Absolute is the most common option. It lets you place a layer anywhere on a page, regardless of the location of the actual HTML code for the content inside the layer.

  For example, even as you polish off a Web page by adding some text at the bottom of the page, you can create a layer that moves that text to the top of the browser window. In other words, the normal flow of HTML content from top to bottom that you encounter with HTML doesn't apply when using absolute positioned layers. The actual HTML code can go anywhere inside the <body> tag and appear anywhere on the page—its position has nothing to do with the positioning of the layer. After you select this option, use the Placement properties (Section 8.3.1.6) to specify a specific position on the page.

• The relative option lets you position a layer relative to its position in the HTML. For example, if you create a layer and specify that it should be 200 pixels from the top, if you use the absolute setting, that layer will appear 200 pixels from the top of the page. However, that same layer with a relative setting will appear 200 pixels down from wherever the HTML code already appears on the page. Add more HTML at the top of the page (as long as it's not inside an absolutely positioned layer), and a relative layer will move down, whereas an absolute layer won't.

• Finally, static is the default setting that you normally find in HTML. It keeps the style in its place in the flow of the HTML and prevents you from placing it at an exact position on the page with CSS. In other words, it's the opposite of what this chapter's about, so just avoid this option.

8.3.1.2 Width and Height

These properties, logically enough, set the width and height of the layer. You can use any of the available CSS measurement systems like pixels, ems, and percentages. In most cases, when you want precise control over the dimensions of your layers—that is, a layer that's exactly 200 pixels wide and won't change even if the visitor changes the size of her browser window—use pixels. However, if you wanted the layer to resize as the visitor resizes her browser window you can use percentages. In this way you can make a layer that's 50 percent the width of the browser window, no matter the size of the window.

8.3.1.3 Visibility

If left to its own devices, Dreamweaver makes the contents of all layers visible on the page, so you'll usually leave this property blank. But there are situations where you may want to make a certain layer (and its contents) invisible in your visitors' Web browsers.

The power of the Visibility property is that, using Dreamweaver Behaviors, you can later make the layer visible again, on cue. Imagine a Web page where you've superimposed many hidden layers on a diagram of a car engine. Moving the mouse over a part of the image makes a layer visible, revealing text that describes the corresponding engine part. (Section 12.4.5 shows you how to create this effect.)

The options for this property let you make the layer visible, which is how all layers start out; hidden so it won't appear until you make it visible; or make it inherit the visibility of another layer. (The only time you might use the inheritance option is with nested layers, as discussed in Section 8.8.)

8.3.1.4 Z-Index

Welcome to the third dimension. Layers are unique in the world of Web elements, because they "float" above (or even behind) a Web page and can overlap each other, completely or partially.

If you were awake in high school algebra, you may remember the graphing system in which the X axis (a line pointing to the right) specified where a point was in space from left-to-right, and the Y axis specified where the point was vertically. And if you were awake and paying attention, you may remember that the Z axis denotes a point's position in front-to-back space. When you draw a three-dimensional object on this type of graph, you need to use all three axes: X, Y, and Z.

The Z-Index of layers doesn't make your Web page appear three-dimensional; it simply specifies the "front-to-backness" of overlapping layers. In other words, the Z-Index, represented by a number in the Z-Index field, controls the stacking order of layers on a page.

In most cases, the page itself lies behind all layers, and the layers stack up from there. In other words, the higher the layer number, the higher the layer, so that a layer with a Z-Index of 4 appears behind an overlapping layer with a Z-Index of, say, 7.

However, you can also use a negative Z-Index (-1, for example) to place a layer behind the plane of the Web page. You could do that when, for example, you want an absolutely positioned layer appear below a part of a page that isn't positioned. (These numbers have no relation to the actual number of layers on a page. You can have three layers with Z-Indexes of 2, 499, and 2000, if you choose. You'd still just have three layers, one on top of the other in ascending order.)

8.3.1.5 Overflow

Suppose you draw a square layer, 100 x 100 pixels. You fill it with a graphic that's 150 x 162 pixels—that is, larger than the layer itself.

You've already seen how a table cell reacts to this situation: it simply grows to fit the content inside it. Layers, however, are more (or less) flexible, depending on your choice of Overflow option in the Property inspector. These choices let you decide how browsers handle the excess part of the image:

• Visible makes the layer grow to accommodate its contents. If you don't choose another setting, layers grow to fit automatically.

• Hidden chops off the excess. In the example, only the top-left 100 x 100 pixels of the image would be visible.

• Scroll adds scroll bars to the layer, so that a visitor can scroll to see all of the layer's contents. It's like a frame, but without requiring a frameset (Section 9.5.3.3). This feature offers an interesting way to add a small, scrollable window within a Web page: Imagine a small "Latest Company News" box, which visitors can scroll and read the text without disturbing anything else on the page.

• Auto adds scroll bars to a layer only if necessary to accommodate its oversize contents.

Dreamweaver can display only the Visible option. If you want to see the effect of any other Overflow setting, you must test the effect in a Web browser (see Section 1.3.5).

8.3.1.6 Placement

These properties let you specify a layer's position, which is the whole point of layers. The four properties set where each of the four edges of the layer begin. For example, setting the Top box to 200 pixels will place the top of the layer 200 pixels down the screen, whereas the Bottom option identifies where the bottom of the layer starts. And the Left and Right properties set where the left edge and right edge of the layer should appear.

Frequently, you'll use a combination of Width property (Section 8.3.1.2) with the Top and Left or Right properties. For example, to place a 150-pixel-wide sidebar 200 pixels from the top of the page and 15 pixels in from the left side of the page, you'd set the Width property to 150 pixels, the Top property to 200, and the left property to 15 pixels. The Right property is also handy. Say you want to put a 200-pixel-wide sidebar at the right side of the page. Since you don't know the exact width of a visitor's browser window?80 pixels, 1200 pixels?—you can't know ahead of time how far from the left edge of the window the layer needs to be. Instead, you can set the Right property to 0—if you want the sidebar to touch the right edge of the page. If you want to indent the layer 20 pixels from the right edge of the window, type 20.

While it's technically possible to use Left and Right positioning simultaneously—say placing a layer 300 pixels from the left edge and 20 from the right—Internet Explorer doesn't support this combination. Instead, use absolute positioning with one edge of the layer and a margin setting (Section 6.7.4) for the other edge.

Positioning isn't quite as straightforward as it might seem. The exact position of the layer is a combination of not only these position values but also what type of placement you choose for the layer—absolute or relative. As noted above, with relative positioning, the numbers you type for Top or Left, for example, are calculated based on where the layer already appears in the code and on the screen. So setting the Top property to 100 pixels, doesn't place the layer 100 pixels from the top of the browser window; it places it 100 pixels from where it already appears on the screen based on the HTML code.

Absolute positioning, however, lets you place a layer at an exact spot on a page. So setting the Top and Left properties for an absolutely positioned layer to 100 and 150 pixels, will place that layer 100 pixels from the top of the browser window and 150 pixels from the left edge.

8.3.1.7 Clip

The Clip property can hide all but a rectangular piece of a layer, as shown in Figure 8-4. In most cases, you should avoid this property, since it's rarely useful, but it's also a waste of precious bandwidth.

For example, say you put a large graphic into a layer, but only wanted to display one small area—like the monster's head shown in Figure 8-4. You could use the Clip property, but the Web browser still has to download the entire graphic, not just the clipped area. You're much better off just preparing the smaller graphic at the right size to begin with (see Chapter 5). The kilobytes you save may be your own.

A layer's Clip property lets you display only a selected section of the layer. In this example, the layer to the left has no clipping set, while the layer to the right has a clipping box that hides all but Nessie's head from sight. Notice that the layer itself remains the same size—as indicated by the black outline. Only the visible portion of that layer has changed.

(In theory, you could use JavaScript to move the clipping area, creating an effect like a spotlight traveling across the layer. Although that might be a more useful purpose for the Clip property, Dreamweaver unfortunately offers no tools for doing it.)

The four clipping settings—top, right, bottom, and left—specify the positions of the clipping box's four edges. In other words, these indicate the borders of the visible area of the layer. Because this can be a bit tricky and confusing, you'll find a surefire technique for determining these four settings in Section 8.7.2.

The Insert Div and Draw Layer tools are not available in Layout mode. If these tools are grayed out on the Insert bar, click the Standard button.

After setting the properties for the layer in the CSS Style definition window, just click the OK button to create the style. The next step is to apply the style to a chunk of HTML code to create the layer.