[Contents] [Prev page] [Next page] [Index]

Dynamic HTML in Netscape Communicator
Part 2. Positioning HTML Content

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

You can use styles to position blocks of HTML content. Part 1. Style Sheets talks about style sheets in general.

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

Cascading style sheets are implemented in browsers from multiple vendors, while the <LAYER> tag may not be supported in non-Netscape browsers.

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).

A style that indicates a positioned block of HTML content must specify a value for the position property. Other than that, you can define the style however you like within the rules of defining style sheets. (See Part 1. Style Sheets for a full discussion of defining style sheets.)

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.

For a full discussion of style sheets, see Part 1. Style Sheets.

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

layercs1.htm

The example opens a new Web browser window, so if you press the link and nothing seems to happen, have a hunt about on your desktop for the second Web browser window.

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.

You can specify the position and content of a layer of HTML inside a <LAYER> tag in the body of the page -- there is no need to pre-define the layer before you specify the content for it. You can specify attributes for the layer such as ID, TOP, LEFT, BGCOLOR, WIDTH, and HEIGHT. (This is not a complete list of attributes -- all the attributes are discussed in Chapter 8, "Defining Positioned Blocks of HTML Content.")

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

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



[Contents] [Prev page] [Next page] [Index]

Last Updated: 08/07/97 15:21:59


Copyright 1997 Netscape Communications Corporation