Tutorial #15:
Netscape Layers

Other tutorials
The Basics
The Basics - Part II
Working With Text
Text - Part II
Making Links
Images
Lists
Tables
CSS
CSS Text Control
CSS-P
Frames
Forms
JSS
Layers
Colors
Marquees

Right away I would like to notice that the title of this page is NETSCAPE layers. So, if you are in Internet Explorer, get out of it. The page will be messed up, rest assured. Sorry, I'd like to have it in all browsers, too.

Layers are Netscape's verson of CSS Positioning. Layers are neat, and actually I like them better than CSS-P, but they aren't endorsed by the W3C, so it isn't as well-known.

So let's begin, shall we?

Here is a layer:

He's not your average Joe
 
 
 
  A layer is independent from the rest of a web page. To prove this, click on the layer, and the press Ctrl A. That will highlight everything. But does it? No it just highlights what's in the layer. Click outside the layer, and do the same thing. What happens?

Take a look at the code for the layer.

<layer top="260" left="250" bgcolor="#FF0000" width="75">He's not your average Joe</layer>

The first thing that you want to do is to define the layer by typing in layer. The four things that come after it are optional and can go in any order. top is used to define how far down from the top of the page to go. left does the exact same thing, except that it goes from the left of the page. bgcolor does the same thing as the bgcolor part of the <body> tag. width tells how wide you want it to be. There is another attribute, height, which I didn't use, and tells the browser how tall you want your layer to be.

One note about the layers (and this may be noticable): Since it is independent, text outside the layer will not wrap around the layer. It will act as though it isn't even there. just thought you'd like to know.

The second part of layers is the inline layer. Take a look:

He's not your average Joe(seriously)
 
 
 
  The inline layer can only exist within a layer. Take a look at the code.

<layer top="710" left="250" bgcolor="#FF0000" width="75">He's not your average Joe<ilayer bgcolor="#FFFF00">(seriously)</ilayer></layer>

The ilayer commands are the same, but I only used only one of them, the bgcolor attribute. It is not independent within the layer, like the layer is within the web page.

The last part of the layers tutorial is the <nolayer> tag. It is like the noframe tag; you use it for browsers who don't support layers (Internet Explorer, any Netscape under 4.0.)

<nolayer>Hey, you don't support layers, so either get Netscape or upgrade the Netscape you've got!</nolayer>

See? That's how it works.