THE BORDER SET-UP

THE BORDER SET-UP
PART 1

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:

The first one, is set your whole page up as a giant TABLE!

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.

THE BORDER SET-UP
PART 2

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".

NOTE : You may also want to insert the "pixel89a.gif" in the right side of your table to hold it's size in case someone makes the browser window smaller or has a small monitor. In this case, with the resolution set for 640x480 on a 15" monitor, the WIDTH would be "415" -- but it will cause a right-left scroll to read the text on a smaller browser window.

Make your browser window narrower and you will see the effect.

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>

The TABLE code above creates the TABLE "example" below -- the whole secret to setting up a sucessful Border Background is in the width of the "pixel89a.gif" that you place in the left cell (it only needs to be HEIGHT="1" to keep the entire left cell clear).

This side is where your
border is and where you
place the "pixel89a.gif"
image to keep it clear.

This side is where you place your text and other graphic images.

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"

Let's take one more look at the original
"all black border background"
and see how it appears when used properly...

Tutorial designed and created by Otter