Here's how to do it.
1. Create a DIV tag
Creating a DIV tag creates a layer.
The DIV tag contains a style attribute with positioning information. It might also have border and size information, if appropriate.
Here is the basic DIV tag required for exact positioning:
The above creates a layer.
You'll notice that the style attribute has five different labels. They all relate to positioning the layer and will be addresses in section 3, "Tell the browser where to put the DIV," below.
2. Put content within the DIV
Putting content between the and tags is providing content for the layer.
The layer might contain an image tag, a word, paragraphs of text, or combination text and images. The layer can contain anything web pages can contain, including forms.
3. Tell the browser where to put the DIV
Telling the browser where to put the DIV tag is actually telling it where to put the layer and its content.
The "top" and "left" labels --
The 2-dimension positioning is done with the "top" and "left" labels in the style attribute. The number is in pixels. In the example DIV tag in section 1, "Create a DIV tag," the layer is put 99 pixels from the top edge and 99 pixels from the left edge.
The "position" label --
The top edge of what? The left edge of what?
The "position" label gives the browser the answers to those questions.
If the position label's value is "absolute," then the number of pixels is measured from the top of the browser window and from the left of the browser window.
If the label's value is "relative" however, the position is measured from the position relative to the place in the HTML source code that you have placed the DIV tag. If you've placed the DIV tag at the end of a paragraph, the position will be calculated relative to the end of that paragraph. Using the "relative" value does not position elements according to purpose of this article, but it does have its uses in other situations.
The "z-index" label --
This label determines the third dimension of positioning when several layers occupy the same pixel of the user's screen. The value of the "z-index" label determines which layer will be placed over the other. If two layers vie for the same spot, one has a "z-index" value of "1" and the other a "z-index" value of "2," then the "2" value layer will be placed over the "1" value layer.
The "z-index" label was used to place text over an image on the demonstration page. The image was given a "z-layer" of 1 and the text a "z-layer" of "2." The demonstration page is at http://willmaster.com/a/21t/pl.pl?art215
The "visibility" label --
Give the "visibility" label a value of "show" so it will be visible. For other purposes, a layer might want to be hidden for a time, in which case the value "hide" or "hidden" would be used.
Supposing the content of the layer is the word "hello," the above would give us a layer like this:
If you want to give the layer a background color or a border, you'll also need to specify the size of the layer. It's done with these labels:
(The "px" represents pixels, although other units of measurements may be specified.)
To give the layer a background color of yellow, use this label and value:
To put a 1-pixel solid black border around the layer, specify these labels and values:
The "border-color" label can have a color name or hexadecimal color value.
The "border-style" label can have other values, such as "dotted" and "dashed," but some browsers print a solid line nevertheless.
The width of the border can be different for each side.
The copyright line layered over the image on the demonstration page is a demonstration of giving a layer a border. The demonstration page is at http://willmaster.com/a/21t/pl.pl?art215
Note: If you wish to apply other style elements within the layer, such as font size or color, use a SPAN, P, or other tag instead of the DIV tag. A DIV tag within a layer (somewhat like a DIV tag nested within a DIV tag) can confuse some browsers.
When you need to position something on a web page exactly, so it stays in that position regardless of what browser is used to view it, what the browser's preferences are, or the size of the browser window, you now know how to do it.
The visitor's browser must be able to render layers, of course, in order to position your content. Most recent browser releases do.
Netscape 4.#, while it does render layers, doesn't do a good job with more than two layers over each other. If this is a high priority for you, you might develop with Netscape 4.# and then verify your pages render correctly in the later browsers.
Those browsers that don't render layers will probably place the content in the order it exists in your source code. That may be a consideration when you decide where in the source code to put layer DIV tags.
To learn more HTML/CSS, check out these tutorials!