HTML The Definitive Guide (65 page)

This is important enough to repeat: normal document content following a tag is positioned directly under the layer it follows. This effect can be circumvented using an inline layer, described in
section Section 6.3.2, "The Tag"
.

6.3.1.3 The above, below, and z-index attributes
Layers exist in three dimensions, occupying space on the page and stacked atop one another and the conventional document content. As we mentioned earlier, layers normally get stacked in order of their appearance in the document - layers at the beginning get covered by later layers in the same display area.

You can control the stacking order of the layers with the above, below, and z-index attributes for the tag. These attributes are mutually exclusive; use only one per layer.

The value for the above or below attribute is the name of another layer in the current document. Of course, that referenced layer must have a name attribute whose value is the same name you use with the above or below attribute in the referring tag. You also must have created the referenced layer earlier in the document; you cannot refer to a layer that comes later in your document.

In direct contradiction with what you might expect, Netscape puts the current layer below the above named layer, and above the below
named layer.[2
] Oh, well. Note that the layers must occupy the same display space for you to see any effects.

[2] One cannot help but wonder if the above and below attributes were implemented in the wee hours of the morning.

Let's use our drop shadow layer example again to illustrate the above attribute:

Introduction to Kumquat Lore

Introduction to Kumquat Lore

The above attribute in the layer named shadow tells Netscape to position the shadow layer so that the layer named text is above it.

The above and below attributes can get confusing when you stack several layers. We find it somewhat easier to use the z-index attribute for keeping track of which layers go over which. With z-index, you specify the order in which Netscape stacks the layers: higher z-index value layers get put on top of lower z-index value layers.

For example, to create our drop shadow using the z-index attribute:

Introduction to Kumquat Lore

Introduction to Kumquat Lore

Normally, Netscape would display the second layer - the gray one in this case - on top of the first layer.

But since we've given the gray layer a lower z-index value, it is placed behind the first layer.

The z-index values need not be sequential, although they must be integers, so we could've used the values 99 and 2, respectively, and gotten the same result in the previous example. And you need not specify a z-index for all the layers that occupy the same display space - only those you want to raise or lower in relation to other layers. However, be aware that the order of precedence may get confusing if you don't z-index all related layers.

For instance, what order of precedence by color would you predict when Netscape renders the following sequence of layers?

Introduction to Kumquat Lore

Introduction to Kumquat Lore

Introduction to Kumquat Lore

Give yourself a star if you said that the green header goes on top of the red header which goes on top of the blue header. Why? Because the red header is of lower priority than the green header based on order of appearance, and we forced the blue layer below the red one by giving it a lower z-index value.

Netscape displays z-indexed layers according to their given order and non-z-indexed layers according to their order of appearance in the document. Precedence based on order of appearance also applies for layers that have the same z-index value. If you nest layers, all the layers at the same nesting level get ordered according to their z-index attributes. This group is then ordered as a single layer among all the layers at the containing level. In short, layers nested within a layer cannot be interleaved among layers at a different level.

For example, consider these nested layers, with their content and end tags omitted for clarity (indentation indicates nest level):

Layers a, b, and c are at the same level, with layers a1 and a2 nested with a, and b1, b2, and b3

nested within b. Although the z-index numbers might at first glance appear to cause Netscape to interleave the various nested layers, the actual ordering of the layers, from bottom to top, is c, a, a1, a2, b, b1, b3, and b2.

If two layers are nested within the same layer and have the same z-index value, the layer defined later
in the document is placed on top of the previously defined layer.[3
]

[3] This, of course, applies to layers inside the same containing nest only.

6.3.1.4 The background and bgcolor attributes
Like the corresponding attributes for the tag, you may define the background color and an image for the layer with the bgcolor and background
attributes, respectively.[4] By default, the

background of a layer is transparent, allowing lower layers to show through.

[4] Note that you may also control the background color, as well as many other display features of not just a single, but all tags within your document using style sheets.

See section
Section 6.3.1.9, "The style and class attributes"
.

The bgcolor attribute accepts a color name or RGB triple as its value, as defined in
Appendix F,

Color Names and Values. If specified, Netscape sets the entire background of the layer to this color,

rendering the layer opaque. This attribute is handy for creating a colored box behind text, as a highlighting or attention-getting mechanism. It will, however, hide any layers below it, including conventional HTML content.

The background attribute accepts the URL of an image as its value. The image is tiled to fill the area occupied by the layer. If portions of the image are transparent, those portions of the layer will be transparent and underlying layers will show through.

If you include both attributes, the background color will show through the transparent spots in the background image. The whole layer will be opaque.

The background attribute is useful for placing a texture behind text, but it fails miserably when the goal is to render text in front of a fixed image. Since the size of a layer is dictated by its contents, not the background image, using the image as the background will cause it to be clipped or tiled, depending on the size of the text. To place text reliably atop an image, use one layer nested within another:

And they lived happily ever after...

Netscape sets aside space for the entire image in the outer layer. The inner layer occupies the same space, except that we shift it down 75 pixels to align the text better over the image. The result is shown in
Figure 6.10.

Figure 6.10: Placing text over an image using layers
6.3.1.5 The visibility attribute

Layers, by default, are usually seen (but most often not heard). You can change that by setting the visibility attribute to show, hide, or inherit. As expected, show forces the layer to be seen, hide hides it from view, and inherit explicitly declares that you want the layer to inherit its parent's visibility. The default value for this attribute is inherit. Layers that are not nested are considered to be children of the main document, which is always visible. Thus, non-nested layers lacking the visibility attribute are initially visible.

It makes little sense to hide layers unless you plan to reveal them later. In general, this attribute is used only when you include some JavaScript routines with your document that will reveal the hidden layers
as a result of some user interaction. [JavaScript Event Handlers, 13.3.3]

Layers that are hidden do not block layers below them from view. Instead, a hidden layer can best be thought of as being transparent. One way to hide content in the main document is to place an opaque layer over the content. To display the hidden context, hide the opaque layer, revealing the content underneath.

6.3.1.6 The width attribute

Layers are only as big as necessary to contain their content. The initial width of a layer is defined to be the distance from the point at which the layer is created in the current text flow to the right margin.

Netscape then formats the layer's contents to that width and makes the height of the layer tall enough to contain all of the layer's contents. If the contents of the layer wind up smaller than the initial width, the layer's width is then reduced to this smaller amount.

You can explicitly set the width of a layer using the width attribute. The value of this attribute defines the width of the layer in pixels. As expected, Netscape then sets the height based upon the size of the layer's contents, wrapped to the specified width. If elements in the layer - such as images - cannot be wrapped and instead extend past the right margin of the layer, only a portion of the element will be shown. The remainder will be clipped by the edge of the layer and not shown. This is similar to the behavior of an image in the main document window. If the image extends beyond the edge of the browser window, only a portion of the image is displayed. Unlike the browser window, however, layers cannot sport scrollbars allowing the user to scroll around in the layer's contents.

6.3.1.7 The src attribute

The contents of a layer are not restricted to what you type between its and tags; you can also refer to and automatically load the contents of another document into the layer with the src attribute. The value of the src attribute is the URL of the document containing the layer's content.

This document is not a full-fledged HTML document and in particular, should not contain or tags. Any other HTML content is allowed.

You can combine conventional layer content with content taken from another file by using both the src attribute and placing content within the tag. In this case, the content from the file is placed in the layer first, followed by any inline content within the tag itself. If you choose to use the src attribute without supplying additional inline content, you still must supply the closing tag to end the definition of the layer.

The src attribute provides, for the first time, a source inclusion capability in HTML. Previously, to insert content from one HTML document within another, you had to rely on a server-based capability to read the other file and insert it into your document at the correct location. Since layers are positioned, by default, at their defining point within the current flow, including another file in your document is simple: ...other content

...more content

Since a layer is rendered as a separate HTML entity, the contents of the included file will not be flowed into the containing text. Instead, it is as if the inserted text were contained within a