[Contents] [Previous] [Next] [Alphabetical Tag List] [Index]

HTML Tag Reference

Positioning Content

This section discusses the tags that let you specify positions for HTML content.


LAYER

(positioned HTML content)

This tag allows you to position blocks of contents. These blocks of positioned content are also called layers. Navigator 4.0

Positioned blocks of content can overlap each other, be transparent or opaque, and be visible or invisible. They can also be nested.

Use the LAYER tag to specify an absolute position for a block of content, and use the ILAYER tag to specify a relative position.

In addition to using the LAYER tag to define positions for blocks of content, you can also use cascading style sheet syntax, as discussed in Dynamic HTML in Netscape Communicator.

For way more details about the LAYER tag, see Part 2, Positioning HTML Content in Dynamic HTML in Netscape Communicator.

Layer Syntax

<LAYER>
  ID="
layerName"
  LEFT="
pixelPosition"
  TOP="
pixelPosition"
  PAGEX ="
pageX"
  PAGE"="
pageY"
  SRC="
file"
  Z-INDEX="
n"
  ABOVE="
layername"
  BELOW="
layername"
  WIDTH="
width"
  HEIGHT="
height"
  CLIP="
n,n,n,n"
  VISIBILITY="
visibility"
  BGCOLOR="
color"
  BACKGROUND="
imageURL"
  OnMouseOver="
JScode"
  OnMouseOut="
JScode"
  OnFocus="
JScode"
  OnBlur="
JScode"
  OnLoad="
JScode"
</LAYER>

ID="layerName"

specifies the name of the layer, enabling other layers and JavaScript scripts to refer to it.

LEFT="pixelPosition" and TOP="pixelPosition"

specify the horizontal and vertical positions of positioned layers or the relative horizontal and vertical positions for inflow layers.

PAGEX and PAGEY

specify the horizontal and vertical positions of the layer relative to the document's window.

SRC="file"

specifies the pathname of a file that contains HTML-formatted content for the layer.

Z-INDEX="n"

specifies the stacking order of a layer. Allows a layer's z-order to be specified in terms of an integer. Layers with higher numbered values are stacked above those with lower ones. Only positive Z-INDEX values are allowed. The use of this attribute cannot be combined with the use of the ABOVE or BELOW attributes.

ABOVE="layername"

specifies the layer immediately on top of a newly created layer in the stacking order; that is, the new layer is created just below the layer specified by layername. The use of this attribute cannot be combined with the use of the BELOW or Z-INDEX attributes.

BELOW="layername"

identifies the layer immediately beneath the newly created layer in the stacking order; that is, the new layer is created just above the layer specified by layername. The named layer must already exist. The use of this attribute cannot be combined with the use of the ABOVE or Z-INDEX attributes.

WIDTH="width"

specifies the width of the layer's content. It controls the right margin for wrapping purposes. The value can be expressed as an integer pixel value or as a percentage of the width of the containing layer.

HEIGHT="height"

specifies the height of the layer's clipping region and serves as the reference for setting the relative height of children layers. The value can be expressed as an integer pixel value or as a percentage of the height of the containing layer (or of the window for a top-level layer).

CLIP="n,n,n,n"

specifies the clipping rectangle (viewable area) of the layer, which can be less than the width and height of the content of the layer. The value is a set of four numbers. Each of the four values represents numbers of pixels.

VISIBILITY

specifies whether the layer is visible or not. A value of SHOW shows the layer. A value of HIDDEN hides the layer. A value of INHERIT causes the layer to have the same visiblity as its parent layer.

BGCOLOR="color"

specifies the background color of the layer. See Color Units for information about color values.

BACKGROUND="imageURL"

specifies an image to use as the background.

OnMouseOver="JScode", OnMouseOut="JScode"

are JavaScript event handlers that are invoked when the mouse cursor enters or leaves the layer. For information about JavaScript, see the JavaScript Guide or the JavaScript Reference.

OnFocus="JScode", OnBlur="JScode"

are JavaScript event handlers that are invoked when the layer gets or loses keyboard focus.

OnLoad="JScode"

is an event handler invoked when the layer is loaded.

Example

This example creates three overlapping layers. The back one is red, the middle one is blue, and the front one is green.

<LAYER ID=layer1 TOP=250 LEFT=50 WIDTH=200 HEIGHT=200 BGCOLOR=RED>
  <P>Layer 1</P>
</LAYER>
<LAYER ID=layer2 TOP=350 LEFT=150 WIDTH=200 HEIGHT=200 BGCOLOR=BLUE>
  <P>Layer 2</P>
</LAYER>
<LAYER ID=layer3 TOP=450 LEFT=250 WIDTH=200 HEIGHT=200 BGCOLOR=GREEN>
  <P>Layer 3</P>
</LAYER>
The file position.htm shows this example in action in a separate window.


ILAYER

(inline layer)

This tag allows you to offset content from its natural position in the page, which is the position the content would normally have if it was not positioned. That is, you can position the content relative to its natural position. This relatively positioned content is both inflow, in that it occupies space in the document flow, and inline, in the sense that it shares line space with other HTML elements. If you want relatively positioned content to appear on a separate line, you can insert a break before the ILAYER tag or embed the ILAYER tag in the <DIV> tag. Navigator 4.0

Syntax

<ILAYER>
see the attributes for LAYER at
Layer Syntax
</ILAYER>

Example

The following example contains a short phrase that is offset by 20 pixels down and 30 pixels to the left of its natural position:

<P>Notice that the page is going along here as usual. 
But now I want a
<ILAYER TOP=20 LEFT=30>series of words </ILAYER>
that are offset from their natural position.</P>
The file position.htm shows this example in action in a separate window.


NOLAYER

(alternative text for layers)

Content that is surrounded by <NOLAYER> and </NOLAYER> tags is displayed by browsers that do not support the LAYER and ILAYER tags. This content is ignored by browsers that do support these tags. Therefore, you can use the <NOLAYER> tag to display content in browsers that will not support the LAYER and ILAYER tags. Navigator 4.0

Note, however, that browsers that do not support the LAYER and ILAYER tags will display content inside the these tags, but the browsers will ignore all positioning information and will lay all the content out sequentially. You could use the SRC attribute to specify positioned content that is stored in a separate file, and then use the NOLAYER tag to display an advisory message to users that they need a LAYER-enabled browser such as Netscape Navigator 4.0 to view the page.

Syntax

<NOLAYER> ... </NOLAYER>

Example

<LAYER SRC=layerContent.html></LAYER>
<NOLAYER>
This page would show some really cool things if you had a browser
that supports the LAYER tag.
</NOLAYER>


[Contents] [Previous] [Next] [Alphabetical Tag List] [Index]

Last Updated: 01/26/98 21:33:44


Copyright © 1998 Netscape Communications Corporation