How to Position Text and Images Exactly within a Web
Page
By
William
Bontrager
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
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
