Creating pages w/ side borders, tables and a spacer: CS Designs

The orange image
below

represents your
SPACER
and blank image
which would
always
appear in this
column.

The width of the
image you set in
your code would
be determined
by the width of
pattern in your
side border.

You will notice
that there is no
width set in the
example code
in the tutorial,
this is so you
can adjust it
to fit your
own background.

Creating pages with side borders,
tables, and a spacer

This tutorial was written for those who want to incorporate sider bordered backgrounds into their Web Pages. The outline you see is a table of 1 row by 2 columns. The border would ordinarily be set to 0, but for this example so you can see exactly what is happening, I have set it to 1. In the left hand column is a small image that is known as a spacer, it is usually a transparent image although you could use any image there to achieve the same effect. For this example I have removed the transparencies, so you can see what I am taking about. For those that need a transparent image to use on their pages, right mouse click on the small box below and save as blank.GIF. Trust me it's there

Your text and images are placed in column 2. ( Once you have added all the text and images for your page and have it exactly how you want it, remove the border of your table by setting the border to 0

Your command should look like:
<TABLE BORDER="0">

For those of you not familiar with tables you can copy and use the following code. Inserting your text and images Where it says "The Contents of your entire page, is placed here"

<CENTER><TABLE BORDER=1 >
<TR> <TD><IMG SRC="blank.gif" HEIGHT="" WIDTH=""></TD>
<TD>The contents of your entire page, is placed here</TD>
</TR> </TABLE></CENTER>
</BODY> </HTML>

Note: Remember to change your Border to = 0 when you are done or you will have a line around your table.

By not specifying the table columns to any specific pixel with or percentage of the page, the table will expand and contract to fit the resolution of the screen that the page is view at.

The only exception to this rule is if you have very wide bars that are larger than the average super vga page of 640 x 400. You will have to take into account the width of your bordered background in relation to your bars. In order to view the width of your entire page, at the lowest screen resolution.the width combination of both should not exceed the pixel width of 640 .

What's that?, you say you are viewing the net at a screen resolution of 800 x 600 yourself, so why bother making your pages viewable correctly for a lower resolution? One comment I might have for you is that not everyone has the latest state of the art equipment, or the latest version of any browser. If you crated your pages without taking all this into account, you will not be allowing all your visitors to the over all presentation of your page. Taking this into account, will allow you to build pages that has good layout and presentation for all your visitors, no matter what they may be viewing your pages with. Besides the convenience to those visiting at lower resolutions, is also making accommodations for those that use ICQ which takes up a part of the screen on the right.

Back to Tutorials Menu