HTML The Definitive Guide (64 page)

If you must have multiple columns, and can tolerate your columns reverting to a single column on incompatible browsers, we recommend you use .

6.2.3 Effective Multicolumn Layouts

We've offered advice on columns throughout these sections. Here is a quick recap of our tips for creating effective column layouts:

Use a small number of columns.

●

Don't use excessively wide gutters.

●

Ensure that embedded elements like images and tables fit in your columns on most displays.

●

Precede each

●

tag with a

tag to improve your document's appearance on other browsers.

Avoid nesting

●

tags more than two deep.

6.1 Creating Whitespace

6.3 Layers

Chapter 6

Document Layout

6.3 Layers

Spacers and multiple columns are natural extensions to conventional HTML, existing within a document's normal flow. Netscape 4.0 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.

Layers supply the layout artist with a most critical element missing in standard HTML: absolute positioning of content within the browser window. In a nutshell, 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 laid 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.

6.3.1 The Tag

HTML document content layers are each defined with the tag. A layer can be thought of as a miniature HTML document whose content is defined between the and tags.

Alternatively, the content of the layer can be retrieved from another HTML document by using the src attribute with the tag.

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:

; 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 tag.

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

6.3.1.1 The name attribute

If you plan on creating a layer and never referring to it, you needn't give it a name. However, if you plan to stack other layers relative to the current layer, as we demonstrate later in this chapter, or modify your layer using JavaScript, you'll need to name your layers using the name attribute. The value you give name is a text string, whose first character must be a letter, not a number or symbol.

Once named, you can refer to the layer elsewhere in the document, and change it while the user interacts with your page. For example, this bit of HTML: Warning! Your input parameters were not valid!

creates a layer named warning that is initially hidden. If in the course of validating a form using a JavaScript routine, you find an error and want to display the warning, you would use the command: warning.visibility = show;

Netscape then makes the layer visible to the user.

6.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 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 so that they can 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:

Upper left!

Middle!

Lower right!

The result is shown in Figure 6.8.

Figure 6.8: Simple text positioning with the tag
Admittedly, this example is a bit dull. Here's a better one that creates a drop shadow behind a heading:

Introduction to Kumquat Lore

Introduction to Kumquat Lore

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 ( sol), the golden fruit was taken (stisus) from the trees on the day the sun stood highest in the sky. We carry this day forward even today, as our summer solstice.

Figure 6.9
shows the result.

Figure 6.9: Creating drop shadow effects with 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 document content, however, still starts at the top of the document, and would end up behind the fancy heading. To push it below the layered heading, we include an empty heading (save for a nonbreaking space -  ) before including our conventional document text.