Chapter 8

Defining Positioned Blocks of HTML Content

This chapter discusses how to specify either absolute or relative positions for blocks of HTML content. It lists all the characteristics you can specify for a positioned block of HTML content, describes the <NOLAYER> tag, and discusses the behavior of applets, plug-ins, and forms in positioned blocks of HTML content.

Absolute versus Relative Positioning.

A layer can have an absolute position or a relative position.

Absolute Positioning

If a layer has an absolute position, you can specify its position within its containing layer, or within the document if it is not inside another layer. You define the exact position of the top, left corner of the layer by setting the left and top attributes or properties.

For a layer with absolute position, if you do not provide values for the left and top attributes or properties, they default to the value of the current position in the containing layer. For a layer at the top level, you can think of the document as the containing layer.

A layer with an absolute position is considered out-of-line in that it can appear anywhere in an HTML document, and does not take up space in the document flow.

To create a layer with an absolute position, use the <LAYER> tag with a matching </LAYER> tag to identify the end of the layer. For layers defined as styles, create a layer with an absolute position simply by specifying the position property as absolute. For example:

<LAYER ID=layer1 TOP=200 LEFT=260>

 <P>Layer 1 content goes here</P>

</LAYER>

<STYLE type="text/css">

<!--

#layer1 {position:absolute; top:200px; left:260px;}

-->

</STYLE>

Relative Positioning

A layer with a relative position is known as an inflow layer, and it appears wherever it naturally falls in the flow of the document. Inflow layers are considered to be both inflow, because they occupy space in the document flow, and inline, because they share line space with other HTML elements. If you want an inflow layer to appear on a separate line, you can insert a break before the layer, or wrap the layer in the <DIV> tag.

For layers with relative positions, you can use the left and top attributes or properties to specify the offset of the layer's top-left corner from the current position in the document.

To create an inflow layer, you can use the <ILAYER> tag with a closing </ILAYER> tag. For layers defined as styles, create an inflow layer by specifying the position property as relative.

For example:

<ILAYER ID=layer2>

 <P>Layer 2 content goes here</P>

</ILAYER>

<STYLE type="text/css">

<!--

#layer2 {position:relative; }

-->

</STYLE>

Attributes and Properties

For the sake of simplicity, in this section the term parameter means either an HTML attribute or a style property. For example, the ID parameter means either the ID attribute that can be used with the <LAYER> tag or the ID style property. Whenever the term attribute is used, it means an attribute for an HTML tag. Whenever the term property is used, it means a style property.

The <LAYER> tag always uses pixels as the unit of measurement for attributes that specify a distance. You do not need to specify the measurement units. For style properties however, you should always specified measurement units for properties that have numerical values.

POSITION

#block1 {position:absolute;}

#block2 {position:relative;}

The position property applies only to layers defined as styles. It indicates that the style represents a positioned block of HTML. Its value can be either absolute or relative.

A style whose position property is absolute creates a layer similar to one created by the <LAYER> tag. A style whose position property is relative creates a layer similar to one created by using the <ILAYER> tag.

ID

<LAYER ID=block1>

#block1 {position:absolute;} /* CSS */

The ID parameter is an identification handle, or name, for the layer. The ID must begin with an alphabetic character. (The ID attribute was previously called NAME. The NAME attribute still works, but its use is discouraged, since it is only applicable to the <LAYER> tag).

You can use the layer's id as a name to refer to the layer from within HTML and from external scripting languages such as JavaScript.

This attribute is optional; by default, layers are unnamed, that is, they have no id.

LEFT and TOP

The LEFT and TOP parameters specify the horizontal and vertical positions of the top-left corner of the layer within its containing layer, or within the document if it is at the top level. Both parameters are optional. The default values are the horizontal and vertical position of the layer's contents as if it was not enclosed in a layer. The value must be an integer.

For layers with absolute positions, the origin is the upper-left corner of the document or containing layer, with coordinates increasing downward and to the right.

The default units for LEFT and TOP when used in the <LAYER> tag is pixels. When defining a layer as a style, however, you need to specify the units. For example:

<LAYER> Tag Syntax

<LAYER BGCOLOR="yellow" TOP=300 LEFT =70

    WIDTH=400 HEIGHT=200>

  <P>Paragraph in layer with absolute position.</P>

  <LAYER BGCOLOR=teal TOP=50 LEFT=20

      WIDTH=200 HEIGHT=100>

    <P>Paragraph in embedded layer with absolute position</P>

  </LAYER>

</LAYER>

CSS Syntax

<DIV STYLE="position:absolute; background-color:yellow;

  top:300px; left:70px; width:200px; height:200px;

  border-width:1;">

 <P>Paragraph in layer with absolute position.</P>

 <DIV STYLE="position:absolute; background-color:teal;

    top:30px; left:20px; width:150px; height:120px;

    border-width:1px;">

    <P>Paragraph in embedded layer with absolute position.</P>

  </DIV>

</DIV>

For layers with relative positions, the origin is the layer's "natural" position in the flow, rather than the upper-left corner of the containing layer or page. You can also use the LEFT and TOP parameters to offset a relatively positioned layer from its natural position in the flow, as shown in the following example.

<LAYER> Tag Syntax

<P>Paragraph above relatively positioned layer.</P>

<P><ILAYER LEFT=2>

This relatively positioned layer is displaced 2 pixels to the right of 

its normal position.

</ILAYER></P>

<P>Paragraph below relatively positioned layer</P>

<P>This <ILAYER TOP=3>word</ILAYER> is nudged down 3 pixels.</P>

CSS Syntax

<P>Paragraph above relatively positioned layer.</P>

<P STYLE="position:relative; left:2px;">

This relatively positioned layer is displaced 2 pixels to the right of 

its normal position.</P>

<P>Paragraph below relatively positioned layer.</P>

<P>This <SPAN STYLE="position:relative; top:3px;>word </SPAN> is nudged 
down 3 pixels.</P>

The following code illustrates another example of relatively positioned layers defined as styles.

STYLE TYPE="text/css">

<!--

all.UP {position:relative; top:-10pt;}

all.DOWN {position:relative; top:10pt;}

-->

</STYLE>

<BODY>

<P>This <SPAN CLASS=DOWN>text </SPAN>goes <SPAN CLASS=UP>up</SPAN>

and <SPAN CLASS=DOWN>down, </SPAN>up

<SPAN CLASS=DOWN>and <SPAN CLASS=DOWN>down.</SPAN></SPAN>

</P>

</BODY>

To see the results of some of the examples given in this section, see:

updown.htm

When using the <LAYER> tag, you can use also inline JavaScript scripted expressions to position the layer. For example, you can position one layer relative to another.

The following example uses inline JavaScript code to define a layer whose ID is suspect1, and then defines another layer whose ID is suspect2 that is positioned 10 pixels below the bottom of the first suspect.

<LAYER ID="suspect1">

    <IMG WIDTH=100 HEIGHT=100 SRC="suspect1.jpg">

    <P>Name: Al Capone

    <P>Residence: Chicago

</LAYER>

<LAYER ID="suspect2" 

    LEFT=&{"&"};{window.document.suspect1.left}; 

    TOP=&{"&"};{window.document.suspect1.top +

        document.suspect1.document.height + 10};>

    <IMG WIDTH=100 HEIGHT=100 SRC="suspect2.jpg">

    <P>Name: Lucky Luciano

    <P>Residence: New York

</LAYER>

Notice these two points in the previous example:

Although you cannot use inline JavaScript within a style definition for a layer, you CAN use JavaScript to reposition such a layer after it has been defined.

PAGEX and PAGEY

<LAYER PAGEX=100 PAGEY=100>

These attributes are used only with the <LAYER> tag; there is no equivalent style property.

The PAGEX and PAGEY attributes specify the horizontal and vertical positions in pixels of the top-left corner of the layer relative to the enclosing document (rather than the enclosing layer.)

SRC and source-include

<LAYER SRC="htmlsource/meals/special.htm>

source-include:url("htmlsource/meals/special.htm"); /* CSS */

The SRC attribute for the <LAYER> tag and the source-include style property specify an external file that contains HTML-formatted text to be displayed in this layer. (Note that the source-include style property is not approved by W3C.)

The file specified can contain an arbitrary HTML document.

The following code shows an example of the use of the SRC attribute and include-source property.

CSS Syntax

<STYLE TYPE="text/css">

<!--

#layer1 {

 position:absolute;

 top:50pt; left:25pt; width:175pt;

 include-source:url("content1.htm");

 background-color:purple;

color:yellow; border-width:1; }

-->

</STYLE>

<BODY BGCOLOR=white>

<DIV ID=layer1>

</DIV>

<LAYER> Tag Syntax

<LAYER top=50 left=250 width=175 

  src="content1.htm"

  BGCOLOR="#8888FF">

</LAYER>

</BODY>

To see the results of this example, select:

source1.htm

Using an external source as the content of your layer is particularly useful if you want to dynamically change the content of the layer. For example, a restaurant might have a web page that uses a layer to describe the special meal of the day. Each morning, after the chef has decided what the special is going to be for the day, he or she quickly edits the file "special.htm" to describe the meal.

The chef doesn't have to rewrite the entire page just to update the information about the special of the day.

WIDTH

<LAYER WIDTH=200>

<LAYER WIDTH="80%">

width:200px; /* CSS */

width:80%; /* CSS */

The WIDTH parameter determines the width of the layer at which the layer's contents wrap. The width can be expressed as an integer value, or as a percentage of the width of the containing layer.

Note, however, that if the layer contains elements that cannot be wrapped, such as images, that extend beyond the specified width, the actual width of the layer expands accordingly.

If this parameter is not specified, the layer contents wrap at the right boundary of the enclosing layer.

HEIGHT

<LAYER HEIGHT=200>>

<LAYER HEIGHT = "50%">

height:200px; /* CSS */

height:50%; /* CSS

The HEIGHT parameter determines the initial height of the clipping region of the layer. The height can be expressed as an integer value, or as a percentage of the height of the containing layer (or the window for a top-level layer.)

Note, however, that if the contents of the layer do not fit inside the specified height, the layer increases its height to include all its contents.

The main purpose of the HEIGHT parameter is to act as the reference height for children layers that specify their heights as percentages.

By default, the height is the minimum height that contains all the layer contents.

CLIP

<LAYER CLIP="20,20,50,100">

clip:rect(0,100,100,0); /* CSS */

The CLIP parameter determines the clipping rectangle of the layer, that is, it defines the boundaries of the visible area of the layer.

The value is a set of four numbers, each separated by a comma, and optionally enclosed in a string. If you omit the quotes, be sure not to have any white space between the four numbers. The numbers indicate the left value, the top value, the right value, and the bottom value in order. The left and right values are specified as pixels in from the left edge of the layer itself, while the top and bottom values are specified as pixels down from the top edge of the layer itself.

Each of the four values are numbers of pixels. You can also specify the value as a set of two numbers, in which case the left and top values default to 0. For example:

CLIP="10,20"

is equivalent to

CLIP="0,0,10,20"

If the CLIP attribute is omitted, the clipping rectangle of a layer is determined by the values of WIDTH, HEIGHT, and the content of the layer. If neither of these values are given, by default, the clip left value of a layer is 0; clip top is 0; clip right is the wrapping width, and clip height is the height required to display all the contents.

Z-INDEX, ABOVE and BELOW

<LAYER Z-INDEX=3>

<LAYER ABOVE=layer1>

<LAYER BELOW=greenlayer>

z-index:3; /* css */

The ABOVE and BELOW attributes are used with the <LAYER> tag. There are no corresponding style properties.

These parameters specify the z-order (stacking order) of layers. If you set one of these parameters, it overrides the default stacking order which is determined by placing new layers on top of all existing layers. Only one of the Z-INDEX, ABOVE, or BELOW parameters can be used for a given layer.

The Z-INDEX parameter allows a layer's z-order to be specified in terms of an integer. Layers with higher-numbered Z-INDEX values are stacked above those with lower ones. Only positive Z-INDEX values are allowed.

The ABOVE attribute specifies the layer immediately on top of a newly created layer; that is, the new layer is created just below the layer specified by the ABOVE attribute. (The ABOVE and BELOW attributes are not available in as style properties.)

Similarly, the BELOW attribute identifies the layer immediately beneath the newly created layer. For either attribute, the named layer must already exist. Forward references to other layers result in default layer creation behavior (as if the ABOVE or BELOW attribute had not appeared).

Currently all nested layers exist above their parent layer in the stacking order. The Z-INDEX, ABOVE and BELOW values are relative to sibling layers, that is, other layers that have the same parent layer.

VISIBILITY

<LAYER VISIBILITY=SHOW>

<LAYER VISIBILITY=HIDE>

<LAYER VISIBILITY=INHERIT>

visibility:show; /* css */

visibility:hide; /* css */

visibility:inherit; /* css */

The VISIBILITY parameter determines whether the layer is visible or not. A value of HIDE hides the layer; SHOW shows the layer; INHERIT causes the layer to have the same visibility as its parent layer. For top level layers (that is, layers that are not nested inside other layers), a value of INHERIT has the same effect as SHOW since the body document is always visible.

By default, a layer has the same visibility as its parent layer, that is, the value of the VISIBILITY attribute is INHERIT.

Remember that even if the visibility of a layer is set to SHOW, you will only be able to see the layer if there are no other visible, opaque layers stacked on top of it.

If the visibility of a relatively positioned layer is HIDE, the layer contents are not shown, but the layer still takes up space in the document flow.

BGCOLOR and BACKGROUND-COLOR

<LAYER BGCOLOR="#00FF00">

<LAYER BGCOLOR="green">

background-color:green;

background-color:00FF00;

The BGCOLOR attribute and background-color style property determine the solid background color of a block of HTML content, similar to the BGCOLOR attribute of the <BODY> tag. The background color is either the name of a standard color such as red or an RGB value, such as #334455 (which has a red hexadecimal value of 33, a green hexadecimal value of 44 and a blue hexadecimal value of 55.)

By default, a layer is transparent -- layers below it show through the transparent areas of the layer's text and other HTML elements.

If a layer is defined with the <LAYER> tag, its background color is applied to the rectangular region occupied by the layer. If a layer is defined as a style, the background color is applied only to the actual content of the layer, not to the entire region of the layer. If the style has a border, the region enclosed by the border uses the background color, but this region is still limited to the region that contains content. If the style specifies width and height values that define a region larger than is needed to display the content, the background color will only be applied to the area inside the border, which will be drawn around the actual content.

Netscape Navigator 4.0 also supports a layer-background-color CSS style property, which sets the background color of the entire layer, but this property is not approved by the W3C.

This is really hard to explain in words, but is immediately obvious when you see the results. To see an illustration of this point, click on:

bgtest.htm

BACKGROUND and BACKGROUND-IMAGE

<LAYER BACKGROUND="images/dogbg.gif">

background-image:url("images/dogbg.gif"); /* CSS */

The BACKGROUND attribute and background-image style property indicate a tiled image to draw across the background of a block of HTML content. The value is the URL of an image.

By default, a layer is transparent -- layers below it show through the transparent areas of layer's text and other HTML elements.

Note that Netscape Navigator 4.0 also supports a layer-background-image CSS style property, which sets the background color of the entire block that uses the style, but this property is not approved by the W3C.

If a layer is defined with the <LAYER> tag, the background image is applied to the rectangular region occupied by the layer. If a layer is defined as a style, the background image is applied to the region that contains the actual content of the layer. If the style specifies width and height values that define a region larger than is needed to display the content, the background image will only be applied to the area that encloses the actual content.

Netscape Navigator 4.0 also supports a layer-background-image CSS style property, which draws the image across the entire layer, but this property is not approved by the W3C.

To see an illustration of this point, click on:

bgimage.htm

OnMouseOver, OnMouseOut

These attributes only apply to the <LAYER> tag.

<LAYER OnMouseOver="highlight(); return false;"> 

<LAYER OnMouseOut="dehighlight(); return false;"> 

These are event handlers. Their values must be functions or inline JavaScript code. The onMouseOver handler is invoked when the mouse enters the layer, and the onMouseOut handler is invoked when the mouse leaves the layer.

OnFocus, OnBlur

These attributes only apply to the <LAYER> tag.

<LAYER OnFocus="function1(); return false;">

<LAYER OnBlur="function2(); return false;">

These are event handlers. Their values must be functions or inline JavaScript code. The onFocus handler is invoked the layer gets keyboard focus, and the onBlur handler is invoked when the layer loses keyboard focus.

OnLoad

This attribute only applies to the <LAYER> tag.

OnLoad="dosomething(); return false;" 

This is an event handler. Its value must be a function or inline JavaScript code. The onLoad handler is invoked when the layer is loaded, regardless of whether the layer is visible or not.

The <NOLAYER> Tag

If an HTML file that contains positioned blocks of HTML content is displayed in a browser that does not know how to position content, the content is displayed as if it was not positioned. If the file contains any scripts that require layers functionality, they will generate JavaScript errors if loaded into a browser that does not support positioning.

You can use the <NOLAYER> and </NOLAYER> tags to surround content that is ignored by Netscape Navigator 4. This enables you to provide alternative content that will be displayed by browsers that cannot position content. For example:

<LAYER SRC=layerContent.html></LAYER>

<NOLAYER>

This page would show some really cool things if you had 

a browser that can position content.

</NOLAYER>

Applets, Plug-ins, and Forms

Layers can contain form elements, applets, and plug-ins, which are known as windowed elements. These elements are special in that they float to the top of all other layers, even if their containing layer is obscured.

When a windowed element is moved to the edge of its containing layer, it disappears as soon as one of its borders hits a border of the layer, instead of seeming to glide out of view as non-windowed elements would do. For form elements, it is the individual element that disappears on contact with the border of the layer, not the entire form.

Note however, that windowed elements do move and change visibility in accordance with their containing layer.

Forms cannot span layers. That is, you cannot have part of the form in one layer and another part in another layer.

Communicator introduces windowless plug-ins, which are plug-ins that do not pop to the top of the window and can be drawn below other items in the window. Windowless plug-ins are discussed in the Plug-in guide.

Here's the URL for the Plug-in Guide:

/library/documentation/communicator/plugin/index.htm 

/library/documentation/communicator/plugin/pg1bas.htm

/library/documentation/communicator/plugin/pg4dr.htm