THE SECRET WEAPON

I have worked with border backgrounds a lot and enjoy the effect they create on the web page. There are two main things that make the layout of the page work and easy to use:

1. The first one, is set your whole page up as a giant TABLE!
2. The second one is this:

Ooops, did you miss that last one?
It is known as a transparent "pixel89a.gif" and can be a lifesaver in a wide variety of HTML situations when trying to manipulate the alignment of text or images.

Here it is with a border around it so you can see it:    
A "pixel" is very tiny, so let me make it larger and you can save it to your own computer:  

~:~:~:~:~:~:~:~

The transparent "pixel89a.gif" is the one exception I can think of where it is okay to change the WIDTH and HEIGHT in your < IMG SRC > tag without resizing the image first in a graphics program. It's actual size is WIDTH="1", HEIGHT="1", bytes="42".

Even if you enlarge the WIDTH and HEIGHT size of the .gif in the < IMG SRC > tag, the byte size will still be only "42" -- and since it is transparent, it won't show distortion. Here it is as a divider bar, with the BORDER set at "1" so you can see it ---
the size is WIDTH="415", HEIGHT="10":

This precious little tool is what will keep your TABLE at a set size with your border background so whether your browser screen is big or small, the text won't overrun the border! All the information up to this point on this page has been done using a TABLE and the "pixel89a.gif".

Now, I'm going to close this TABLE and open a new one with all BORDERS set to "1" so you can see the layout as you read the HTML coding.

When working on a web page with a border, I usually leave my TABLE and "pixel89a.gif" BORDER settings at "1" so I can see the layout. Then, when I have finished the page to my satisfaction, I reset them to "0" so they disappear.

If you look carefully at the bottom of this TABLE in the left cell for the border graphic, you will see I have set the "pixel89a.gif" wide enough to keep the text off of the graphic (look for a tiny green rectangle).

Here is the entire, simple, basic HTML coding for what I have written in this section using a Border Background:

< HTML >
< HEAD >
< TITLE >THE BORDER SET-UP< /TITLE >
< /HEAD >

< BODY BGCOLOR="#FFFFFF" BACKGROUND="border202b.gif"
TEXT="#000000"
LINK="#00A563"
ALINK="#DFD09B"
VLINK="#007B42" >

< CENTER >
< TABLE BORDER="1" >
< TR >
< TD VALIGN="bottom" ALIGN="center" >
< IMG SRC="pixel89a.gif" WIDTH="165" HEIGHT="1"
BORDER="1" > < /TD >

< TD >
< FONT SIZE="6" COLOR="#C6AA60" FACE="Arial" >
< CENTER >
< B >THE BORDER SET-UP < /B >
< BR >
< FONT SIZE="4" >
< B >PART 2 < /B >
< /FONT >
< /CENTER >
< /FONT >

< P > < BR >
When working on a web page with a border, I usually leave my TABLE and "pixel89a.gif" BORDER settings at "1" so I can see the layout. Then, when I have finished the page to my satisfaction, I reset them to "0".< /P >

< P >
If you look carefully at the bottom of this TABLE in the left cell with the border graphic, you will see I have set the "pixel89a.gif" wide enough to keep the text off of the graphic.< /P >

< /FONT >
< /TD > < /TR >
< /TABLE >
< /CENTER >
< /BODY >
< /HTML >

As you insert your text, your TABLE will expand to the width of the page and you will need to make some adjustments to the WIDTH of the "pixel89a.gif".

This whole layout is actually just a very simple TABLE using only one TABLE ROW -- < TR > -- and two TABLE CELLS -- < TD > -- to create it:

< CENTER >
< TABLE BORDER="0" >
< TR >
< TD >
< IMG SRC="pixel89a.gif" WIDTH="165" HEIGHT="1" BORDER="0" >
< /TD >

< TD >
This side is where you place your text and other graphic images.
< P >
Be sure to remember to use all opening and closing tags when creating your TABLE and you should have a beautiful web page using a "Border Background"< /P >
< /TD >
< /TR >
< /TABLE >
< /CENTER >

Be sure to remember to use all opening and closing tags when creating your TABLE and you should have a beautiful web page using a "Border Background"

Copyright is claimed by Otter Sites Web Design to the entire body of this collection, as an entity, and to the HTML code which presents it as a collection. Otter Sites has received expressed permission for use of public domain and other privately owned works on this web site.

The content of this site, in part or in full, may not be reproduced, published, transmitted, uploaded, modified or distributed in any manner without Otter Sites prior written permission. Otter Sites Web Design is not responsible for material presented on third party linked sites.