Platinum Edition Using HTML 4, XML, and Java 1.2:Introduction to Dynamic HTML

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

The third image uses the style class “sample2.” This style defines a relative position for the image—defined relative to where the image would have appeared. This image would have appeared directly under the first inline image, so the left and top attributes are relative to that position. As a result, the image appears 50 pixels farther to the left and 200 pixels above this position. In addition, the height of the style is less than the height of the image, so it is scaled in this axis. This image is made to appear below the other two by specifying a z-index attribute value of –1.

Finally, the block of text is positioned absolutely, to overlay all three images.

FIGURE 24.1 HTML element positioning enables you to place objects within a Web page exactly where you want them instead of letting the client Web browser decide how to render them.

CAUTION:
Netscape Navigator supports only values of z-index that are positive integers. If you try to design Web pages that will appear correctly in both Navigator and Internet Explorer, keep this in mind.

Netscape’s <LAYER> Tag

Although the <LAYER> and <ILAYER> tags will not become standard HTML, they are supported in Netscape Navigator; therefore, you might want to learn how to position HTML elements by using them. Sometimes these tags work better in Navigator than the CSS positioning attributes. If you are designing documents for an audience predominantly using Netscape’s Web browser, you might want to use the <LAYER> tag.

Listing 24.2 shows an HTML document designed to achieve roughly the same HTML element layout as achieved by that shown in Listing 24.1 using the <LAYER> and <ILAYER> tags. Figure 24.2 demonstrates that the result is, in fact, very similar.

Listing 24.2 LayerPos.htm—Using Netscape’s <LAYER> Tag to Position HTML Elements

<HTML>
<HEAD>
<TITLE>LAYER Positioning</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<H1>LAYER Positioning</H1>
<HR>
<ILAYER Z-INDEX=2>
   <IMG SRC=“Tux.jpg” WIDTH=450 HEIGHT=335 BORDER=0>
</ILAYER>
<LAYER PAGEX=100 PAGEY=100 Z-INDEX=3>
   <IMG SRC=“Tux.jpg” WIDTH=150 HEIGHT=150 BORDER=0>
</LAYER>
<ILAYER LEFT=275 TOP=-300 Z-INDEX=1>
   <IMG SRC=“Tux.jpg” WIDTH=200 HEIGHT=335 BORDER=0>
</ILAYER>
<DIV STYLE=“position: absolute; top: 1.75in; left: 1.5in;
            z-index: 4;color: yellow; font: 36pt Verdana”>
   Works With Text, Too!
</DIV>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</BODY>
</HTML>

FIGURE 24.2 Netscape’s nonstandard <LAYER> and <ILAYER> tags give you another way to position HTML elements in documents meant for Navigator version 4 and higher.

Some important differences between these two examples are noted, along with other points of interest, as follows:

• <LAYER> tags define layers that are absolutely positioned; <ILAYER> tags define layers that are positioned relative to where they would otherwise have appeared in the HTML document.

• As mentioned in the preceding section, Netscape Navigator supports only positive integer values of the z-index attribute—images with the highest z-index value appear on top. To achieve the desired three-dimensional layout, therefore, it was necessary to place each copy of the image in a layer of its own and assign appropriate z-index attributes to each.
Note that if the first image’s <ILAYER> tag had been named with an ID attribute, the desired layering of images could have been achieved by using the BELOW and ABOVE attributes in the other two images’ <LAYER> and <ILAYER> tags.

• The WIDTH and HEIGHT attributes of the <LAYER> and <ILAYER> tags do not perform the same scaling function that the corresponding style sheet attributes perform. Therefore, to achieve the same scaling in this example as in the last, it was necessary to alter the WIDTH and/or HEIGHT attributes of the <IMG> tag.

• Did you notice that the positioning and other styles applied to the text block were done with the exact same code as in the previous example? They could have been done with a <LAYER> tag, but they were done this way to emphasize that Navigator also supports style sheets and CSS positioning.

The <LAYER>/<ILAYER> tags are currently the centerpiece of Netscape’s Dynamic HTML implementation, although that is changing as Netscape moves to a more CSS-oriented approach. Chapter 25, “Advanced Netscape Dynamic HTML,” discusses the use of these tags in much greater depth.

• See “Content Positioning,” p. 618.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.