Chapter 7

Introduction

This chapter introduces the concept of using positioned blocks or layers of HTML content, and looks at the ways to define positioned blocks of HTML content.

Throughout this document, the terms layer and positioned block of HTML content are used interchangeably.

Overview

Netscape Navigator 4.0 introduces functionality that allows you to define precisely positioned, overlapping blocks of transparent or opaque HTML content in a web page.

You can write JavaScript code to modify these blocks of HTML content, or layers. Using JavaScript, you can move them, hide them, expand them, contract them, change the order in which they overlap, and modify many other characteristics such as background color and background image. Not only that, you can change their content, and you can create new layers on the fly. Basically, you can use HTML and JavaScript to create dynamic animations on a web page and to create self-modifying web pages.

Using JavaScript and positioned blocks of HTML content, you can achieve dynamic animations directly in HTML. For example, layers can move, expand, and contract. You could also have many overlapping layers that can be dynamically peeled away to reveal the layer underneath.

Layers can be stacked on top of each other, and they can be transparent or opaque. If a layer is transparent, the content of underlying layers shows through it. You can specify background images and background colors for layers just as you can for the body of an HTML document.

Layers can be nested inside layers, so you can have a layer containing a layer containing a layer and so on.

Netscape Navigator 4.0 offers two ways to dynamically position HTML layers:

A document can contain both layers that are defined as styles and layers that are defined with the <LAYER> tag. Also, if a layer is defined with the <LAYER> tag, it can use make use of styles.

The rest of this chapter discusses how to position a block of HTML content using styles, and then discusses how to do it using the <LAYER> tag.

Positioning HTML Content Using Styles

This section talks about using cascading style sheet (CSS) syntax to define styles for positioned blocks of HTML content. To see the original W3C Specification on using cascading style sheets for positioning blocks of HTML content, select:

http://www.w3.org/pub/WWW/TR/WD-positioning

The style for a positioned block of HTML content always includes the property position. The value can be either absolute, which indicates a layer with an absolute position in its containing layer, or relative, which indicates a layer with a position relative to the current position in the document.

You can also specify the top and left properties to indicate the horizontal indent from the containing layer (for an absolutely positioned layer), or the current position in the document (for a relatively positioned layer).

If your document contains one or more layers with absolute positions, these layers are unlikely to share styles, since each one will need its own specific value for top and left to indicate its position. The use of individual named styles can be very useful for defining layers, since you can define a named style for each layer. (A named style is the same as a style with a unique ID.)

For example, the following <STYLE> tag defines styles for two layers. The layer named layer1 is positioned 20 pixels from the top of the page and 5 pixels in from the left. The layer named layer2 is positioned 60 pixels down from the top, and 250 pixels in from the left.

<STYLE TYPE="text/css">

<!--

#layer1 {position:absolute;

 top:20px; left:5px;

 background-color:#CC00EE;

 border-width:1; border-color:#CC00EE;

 width:200px;

 }

#layer2 {position:absolute;

 top:60px; left:250px;

 background-color:teal;

 width:200px;

 border-width:2px; border-color:white; }

}

-->

</STYLE>

Any style that specifies a value of absolute or relative for its position property defines a positioned layer. You use a layer style as you would use any other style in the body of your document. However, bear in mind that the idea of a layer is to act as a single entity of content. If you want your layer to contain more than one element, you can apply the layer style to a containing element, such as DIV or SPAN, that contains all the content.

For example:

<BODY BGCOLOR=white>

<DIV ID=layer1>

 <H1>Layer 1</H1>

 <P>Lots of content for this layer.</P>

 <IMG SRC="images/violets.jpg" align=right>

 <P>Content for layer 1.</P>

<P>More Content for layer 1.</P>

</DIV>

<P ID=layer2>Layer 2</P>

The following example uses the STYLE attribute directly in an element to specify that the element is a positioned layer:

<DIV STYLE="position:absolute; top:170px; left:250px;

 border-width:1px; border-color:white;

 background-color:#6666FF">

<H1>Layer 3 </H1>

<P>This is a blue block of HTML content.</P>

</DIV>

If you understand how to use style sheets to define styles, you can use the power of style sheets to define your layers. For example, you could create a colorful layer with a ridge-style 3D border as follows:

#layer4 {position:absolute;

 top:300px; left:100px;

 color:magenta;

 background-color:yellow;

 border-width:20px; border-color:cyan;

 border-style:ridge;

 padding:5%;

}

<BODY>

<DIV ID=layer4>

 <H1>Layer 4 </H1>

 <P>I am a very colorful layer.</P>

</DIV>

</BODY>

If you define a style with an absolute position, don't set margins for it, since it will get its position from the top and left properties.

To see the results of using the styles discussed so far in this section, select:

layercs1.htm

You can view the source code for layerscs1.htm to see the entire code for the examples.

Positioning HTML Content Using the <LAYER> Tag

Navigator 4.0 supports an alternative syntax for positioning blocks of HTML content. This syntax extends HTML to include the <LAYER> tag.

At the time of writing, the <LAYER> tag is specific to the Netscape Navigator 4.0+ web browser. Other browser may not handle layers defined with the <LAYER> tag property.

When using the <LAYER> tag, you can use inline JavaScript in the layer definition, so for example, you can position layers relative to each other, such as having the top of one layer start just below the bottom of another.

The following code gives an example of the use of the <LAYER> tag.

<!-- default units for TOP, LEFT, and WIDTH is pixels -->

<LAYER ID=layer1 TOP=20pt LEFT=5pt 

  BGCOLOR="#CC00EE" WIDTH=200>

 <H1>Layer 1</H1>

 <P>Lots of content for this layer.</P>

 <IMG SRC=violets.jpg align=right>

 <P>Content for layer 1.</P>

 <P>More Content for layer 1.</P>

</LAYER>

<LAYER ID=layer2 TOP=60 LEFT=250 BGCOLOR=teal WIDTH=200>

 <P>Layer 2</P>

</LAYER>

<LAYER ID=layer3 TOP=170 LEFT=250 BGCOLOR="#6666FF">

 <H1>Layer 3</H1>

 <P>This is a blue block of HTML content.</P>

</LAYER>

You can use the <LAYER> tag in conjunction with styles to create stylized layers. For example, the following code creates a colorful style class and applies it to a layer created with the <LAYER> tag:

<STYLE TYPE="text/css">

<!--

 all.style4 {

 color:magenta;

 border-width:20px; border-color:cyan;

 border-style:ridge;

 padding:5%;

}

-->

</STYLE>

<BODY BGCOLOR=white>

<LAYER ID=layer4 TOP=300 LEFT=100 BGCOLOR=yellow

    CLASS=style4>

 <H1>Layer 4 </H1>

 <P>I am a very colorful layer.</P>

</LAYER>

</BODY>

To see the results of using the styles discussed so far in this section, select:

layertg1.htm