Although I’ve written several articles that included examples of positioning, such as “Instant Info” and the “No-Kill Pop Box” series, it occurred to me that I’ve never written an article about how to do the positioning itself.

This is it.

Basically, it’s three steps:

1. Create a DIV tag.

2. Put content within the DIV.

3. Tell the browser where to put the DIV.

What you’re doing is making a layer. I’ll explain those three steps in a moment.

Without the above, text and images can move, and probably will, depending on which browser is displaying your page and the size preferences the user has specified.

That’s not necessarily bad. But if you must have something in an exact position, making a layer and positioning it is a way to do it.

You might want a photograph overlapping another. Or, you might want to place some text so it overlaps an image. Or, perhaps, your logo must be in the exact same place on every web page.

A demonstration page has been prepared consisting of four layers.

The first layer is a photograph of the Old Faithful geyser at Yellowstone National Park. The other layers are layered over the first and are composed of text, the word “Old,” the word “Faithful,” and a copyright line (this latter being bordered).

The demonstration page is at
http://willmaster.com/a/21t/pl.pl?art215

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:

<div
   style="
      top: 99;
      left: 99;
      position: absolute;
      z-index: 1;
      visibility: show;">
<!-- content will go here -->
</div>

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 <div…> and </div> 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.

Special Effects

Supposing the content of the layer is the word “hello,” the above would give us a layer like this:

<div
   style="
      top: 99;
      left: 99;
      position: absolute;
      z-index: 1;
      visibility: show;">
hello
</div>

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:

width: 266px;
height: 17px;

(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:

background: yellow;

To put a 1-pixel solid black border around the layer, specify these labels and values:

border-color: #000000;
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;

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.

Will Bontrager

About the Author:

Copyright 2003 Bontrager Connection, LLC
William Bontrager Programmer/Publisher, “WillMaster Possibilities” ezine mailto:possibilities@willmaster.com