home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  


Book HomeHTML & XHTML: The Definitive GuideSearch this book

14.3. Layers

Spacers and multiple columns are natural extensions to conventional HTML, existing within a document's normal flow. With Navigator Version 4, Netscape took HTML into an entirely new dimension with layers. It transforms the single-element document model into one containing many layered elements that are combined to form the final document. Regrettably, layer support will be omitted from Netscape 6.

Layers supply the layout artist with a most critical element missing in standard HTML: absolute positioning of content within the browser window. Layers let you define a self-contained unit of HTML content that can be positioned anywhere in the browser window, placed above or below other layers, and made to appear and disappear as you desire. Document layouts that were impossible with conventional HTML are trivial with layers.

If you think of your document as a sheet of paper, layers are like sheets of clear plastic placed atop your document. For each layer, you define the content of the layer, its position relative to the base document, and the order in which it is placed on the document. Layers can be transparent or opaque, visible or hidden, providing an endless combination of layout options.

14.3.1. The <layer> Tag

HTML document content layers are each defined with the <layer> tag. A layer can be thought of as a miniature HTML document whose content is defined between the <layer> and </layer> tags. Alternatively, the content of the layer can be retrieved from another HTML document by using the src attribute with the <layer> tag.

<layer>

Function:

Define a layer of content within a document

Attributes:

ABOVE

NAME

BACKGROUND

SRC

BELOW

STYLE

BGCOLOR

TOP

CLASS

VISIBILITY

CLIP

WIDTH

LEFT

Z-INDEX

End tag:

</layer>; always used

Contains:

body_content

Used in:

block

Regardless of its origin, Netscape formats a layer's content exactly like a conventional document, except that the result is contained within that separate layer, apart from the rest of your document. You control the position and visibility of this layer using the attributes of the <layer> tag.

Layers may be nested, too. Nested layers move with the containing layer and are visible only if the containing layer itself is visible.

14.3.1.2. The left and top attributes

Without attributes, a layer gets placed in the document window as if it were part of the normal document flow. Layers at the very beginning of a document get put at the top of the Netscape window; layers that are between conventional document content get placed in line with that content.

The power of layers, however, is that you can place them anywhere in the document. Use the top and left attributes for the <layer> tag to specify its absolute position in the document display.

Both attributes accept an integer value equal to the number of pixels offset from the top left (0,0) edge of the document's display space or, if nested inside another layer, the containing layer's display space. As with other document elements whose size or position extends past the edge of the browser's window, Netscape gives the user scrollbars to access layered elements outside the current viewing area.

Here is a simple layer example that staggers three words diagonally down the display -- not something you can do easily, and certainly not with the same precision, in conventional HTML:

<layer left=10 top=10>
  Upper left!
</layer>
<layer left=50 top=50>
  Middle!
</layer>
<layer left=90 top=90>
  Lower right!
</layer>

The result is shown in Figure 14-8.

Figure 14-8

Figure 14-8. Simple text positioning with the <layer> tag

Admittedly, this example is a bit dull. Here's a better one that creates a drop shadow behind a heading:

<layer>
  <layer left=2 top=2>
    <h1><font color=gray>Introduction to Kumquat Lore</font></h1>
  </layer>
  <layer left=0 top=0>
    <h1>Introduction to Kumquat Lore</h1>
  </layer>
</layer>
<h1>&nbsp;</h1>
Early in the history of man, the kumquat played a vital role in the
formation of religious beliefs. Central to annual harvest celebrations
was the day upon which kumquats ripened. Likened to the sun (<i>
sol</i>), the golden fruit was taken (<i>stisus</i>) from the trees on
the day the sun stood highest in the sky.  We carry this day forward
even today, as our summer <i>solstice</i>.

Figure 14-9 shows the result. Figure 14-10 demonstrates what happens with layers when viewed with a browser other than Netscape.

Figure 14-9

Figure 14-9. Creating drop shadow effects with multiple layers

Figure 14-10

Figure 14-10. Internet Explorer doesn't support multiple layers

We used a few tricks to create the drop shadow effect for the example header. First, Netscape covers layers created earlier in the document by later layers. Hence, we create the gray shadow first, followed by the actual heading, so that it appears on top, above the shadow. We also enclosed these two layers in a separate containing layer. This way, the shadow and header positions are relative to the containing layer, not the document itself. The containing layer, lacking an explicit position, gets placed into the document flow as if it were normal content and winds up where a conventional heading would appear in the document.

Normal content, however, still starts at the top of the document and could end up behind the fancy heading in our example. To push content below our layered heading, we include an empty heading (save for a nonbreaking space -- &nbsp;) before including our conventional document text.

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

14.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 as well as on top of 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 <layer> 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 <layer> tag. You also must have created the referenced layer earlier in the document; you cannot refer to a layer that comes later.

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

[72]One cannot help but imagine that the above and below attributes were implemented in the wee hours.

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

<layer>
  <layer name=text left=0 top=0>
    <h1>Introduction to Kumquat Lore</h1>
  </layer>
  <layer name=shadow above=text left=2 top=2>
    <h1><font color=gray>Introduction to Kumquat Lore</font></h1>
  </layer>
</layer>

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 effect is identical to Figure 14-9.

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:

<layer>
  <layer left=0 top=0 z-index=2>
    <h1>Introduction to Kumquat Lore</h1>
  </layer>
  <layer left=2 top=2 z-index=1>
    <h1><font color=gray>Introduction to Kumquat Lore</font></h1>
  </layer>
</layer>

Again, the effect is identical to Figure 14-9. 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?

<layer left=0 top=0 z-index=3>
  <h1><font color=red>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=4 top=4>
  <h1><font color=green>Introduction to Kumquat Lore</font></h1>
</layer>
<layer left=8 top=8 z-index=2>
  <h1><font color=blue>Introduction to Kumquat Lore</font></h1>
</layer>

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):

<layer name=a z-index=20>
  <layer name=a1 z-index=5>
  <layer name=a2 z-index=15>
<layer name=b z-index=30>
  <layer name=b1 z-index=10>
  <layer name=b2 z-index=25>
  <layer name=b3 z-index=20>
<layer name=c z-index=10>

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 they have the same z-index value, the layer defined later in the document is placed on top of the previously defined layer.[73]

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

14.3.1.4. The background and bgcolor attributes

Like the corresponding attributes for the <body> tag, you may define the background color and an image for a Netscape layer with the bgcolor and background attributes, respectively.[74] By default, the background of a layer is transparent, allowing lower layers to show through.

[74]Note that you may also control the background color as well as many other display features of not just a single tag but all <layer> tags within your document using style sheets. See Section 14.3.1.9, "The style and class attributes".

The bgcolor attribute accepts a color name or RGB triplet as its value, as defined in Appendix G, "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:

<layer>
  <img src="sunset.gif">
  <p>
  <layer top=75>
    <h2 align=center>And they lived happily ever after...</h2>
  </layer>
</layer>

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 14-11.

Figure 14-11

Figure 14-11. Placing text over an image using layers

14.3.1.7. The src attribute

The contents of a layer are not restricted to what you type between its <layer> and </layer> 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.

Note that the layer src'd document should not be a full-fledged HTML document. In particular, it should not contain <body> or <head> tags, although 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 <layer> 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 </layer> 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 very simple:

...other content
<layer src="boilerplate"></layer>
...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 <div> tag or other block-level HTML element.

14.3.2. The <ilayer> Tag

While you control the position of a <layer> using top and left attribute coordinates relative to the document's entire display space, Netscape provides a separate tag, <ilayer>,that lets you position individual layers with respect to the current flow of content, much like an inline image.

<ilayer>

Function:

Define an inline layer of content within a text flow

Attributes:

ABOVE

NAME

BACKGROUND

SRC

BELOW

STYLE

BGCOLOR

TOP

CLASS

VISIBILITY

CLIP

WIDTH

LEFT

Z-INDEX

End tag:

</ilayer>; always used

Contains:

body_content

Used in:

text

An <ilayer> tag creates a layer that occupies space in the containing text flow. Subsequent content is placed after the space occupied by the <ilayer>. This is in contrast to the <layer> tag, which creates a layer above the containing text flow, allowing subsequent content to be placed under the layer just created.

The <ilayer> tag removes the need for an enclosing, attribute-free <layer> that serves to put a nest of specially positioned layers inline with the content flow, much like we did in most of the examples in the previous sections of this chapter. The attributes of the <ilayer> are the same as those for the <layer> tag.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.