Section 8.3. Creating CSS Styles for Layers | Dreamweaver 8[c] The Missing Manual

8.3. Creating CSS Styles for Layers

After you've determined the size and position of a layer, your first step's to 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 on Section 6.2 to open the New CSS Rule window.

In the New CSS Rule 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 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 it (Section 5.4.1). In fact, Dreamweaver comes with several preprogrammed JavaScript routines for these kinds of effects (see Section 11.4.2.3).

To create an ID style, choose Advanced from the Selector Type list in the New CSS Rule window (see Figure 8-2).

Figure 8-2. 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.

Type a name for the style in the Selector box in the middle 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), and then click the OK button to open the CSS Rule Definition window and begin setting CSS properties (see Figure 8-3).

Figure 8-3. The Positioning category of the CSS Rule Definition window lets you set the properties necessary to accurately place content on a Web page.

8.3.1. The CSS Positioning Properties

A layer can use any CSS-style property. For example, you can use the Background Color property 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 Rule Definition window (Figure 8-3).

8.3.1.1. Positioning type

There are four available position types: absolute, relative, static, and fixed. 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 absolutely positioned layers. The actual HTML code can go anywhere inside the <body> tag and appear anywhere on the pageits position has nothing to do with the positioning of the layer. After you select this option, use the Placement properties (see 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 appears 200 pixels from the top of the page (or in the case of a nested layer, from the top of its parent layersee Section 8.7.4 for more on this). However, that same layer with a "relative" setting appears 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 moves down, whereas an absolute layer doesn't. For example, say you added two divs at the very bottom of a very long Web page. Perhaps you gave both divs the same positioning values200px from the left and 10px from the topbut gave the first div an "absolute" position type, and the second div a "relative" position type. When a visitor comes to the page, he sees the first div 10 pixels from the top of the page and indented 200 pixels from the left edge. However, the second div isn't visible until the visitor scrolls all the way to the bottom of the page, where he finds it indented 200 pixels from the left edge of the page and 10 pixels lower than it would normally appear if no positioning were applied at all.
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.
Fixed is similar to the "fixed" value of the CSS "attachment" property used to lock a background image in place (see Section 6.7.2.3). This option "fixes" the layer in place in the browser window. When you scroll down the page, the layer doesn't move but remains in an exact position in the browser window. It's a cool option with exciting possibilities and absolutely no support in Internet Explorer. You may want to experiment with the "fixed" option and the Firefox browser, but when building a Web site you actually want the whole world to see, skip it.

POWER USERS' CLINIC
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's 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 the following:

Check out this list of CSS Layout Resources at: http:// 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 produces ready-to-use CSS and HTML code.

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 layersthat is, a layer that's exactly 200 pixels wide and won't change even if the visitor changes the size of her browser windowuse pixels. However, if you want 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.

Tip: The Width and Height properties available under the Positioning category of the CSS Rule Definition window are identical to the options with the same name under the Box category. Also note that CSS calculates the total width of a style as this Width value plus any borders, margins, or padding (see the Warning on Section 6.7.4 for more information).

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 in which 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 11.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); make it "hidden," so it won't appear until you make it visible; or make it "inherit" the visibility of another layer. (The only time you may use the inheritance option is with nested layers, as discussed on Section 8.7.4.)

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 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 denoted 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.

Note: The Z-Index setting doesn't always work when you try to overlap certain kinds of content, like pulldown menus , radio buttons , or other form elements. It also may not work with plug-in content like Flash or Java applets. This is because Web browsers let other programs control the display of these items.

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 to 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. Spacing your Z-Index numbers in this manner is helpful, since it lets you add in layers as you develop your page without having to renumber everything.)

Note: A negative Z-Index won't work if your visitors are using Firefox. Instead of displaying the layer below the content of a page, the layer won't be visible at all.

8.3.1.5. Overflow

Suppose you draw a square layer that's 100 x 100 pixels. Then you fill it with a graphic that's 150 x 162 pixelsthat 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 above, 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 having a miniature browser window embedded in the page. 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 to read the text inside without disturbing anything else on the page.
Auto adds scroll bars to a layer only if necessary to accommodate its oversize contents.

Dreamweaver 8 displays these overflow settings differently than previous versions of the program. Now, in Design view, if you've selected any option besides "visible," you'll see the layer's set dimensionsfor example, 100 pixels by 100 pixels. Any content outside that areathe overflowwon't be displayed.

You may have content you'd like to edit that's part of the overflowthe "Latest Company News" box example above, for example. Dreamweaver 8 does give you an easy way to edit any of that hidden contentjust double-click the layer. Doing so expands the layer (just as if you'd selected the visible option) so you can edit it. To reset the layer back to its original dimensions, right-click (Control-click) the layer and, from the shortcut menu that appears, select Element View Hidden.

8.3.1.6. Placement

These properties let you specify a layer's position, which is the whole point of layers. The four properties control where each of the four edges of the layer begin. For example, setting the Top box to 200 pixels places 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 the Width property (Section 8.3.1.3) 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 window580 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 0if 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 simultaneouslysay, placing a layer 300 pixels from the left edge and 20 from the rightInternet Explorer doesn't support this combination. Instead, use absolute positioning with one edge of the layer and a margin setting (see Section 6.7.4.1) for the other edge.

Positioning isn't quite as straightforward as it may 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 layerabsolute or relative. As noted earlier, with relative positioning, the numbers you type for Top or Left, for example, are calculated based on where the layer already appears in the HTML 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 would appear 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.

Note: There's one additional wrinkle to absolute positioning. For nested layers (Section 8.7.4), the position values are calculated based on the position of the parent layer. For example, if you have one layer that's located 300 pixels from the top of the page, an absolutely positioned layer nested inside that layer with a Top position setting of 20 won't appear 20 pixels from the top of the page. Instead, it will appear 20 pixels from the top of the parent layer, or, in this example, 320 pixels from the top of the page.

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, and 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 arealike 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.

Figure 8-4. 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 sizeas indicated by the black outline. Only the visible portion of that layer has changed.

You can use JavaScript to move the clipping area, creating an effect like a spotlight traveling across the layer. Although that may be a more useful purpose for the Clip property, Dreamweaver unfortunately offers no tools for performing this maneuver.

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 understanding how this works is tricky and can be confusing, you'll find a surefire technique for determining these four settings on Section 8.7.3.

After setting the properties for the layer in the CSS Rule Definition window, just click the OK button to create the style. The next step's to apply the style to a chunk of HTML code to create the layer.