Using bordered Backgrounds -
a simple solution to the common problem of arranging
the page so that the text doesn't overlap the border

First, you need to be able to visualise your page : think of it as a table of just two cells - one the width of the border and the other the width of the rest of the page, both cells reaching all the way from the top to the bottom of the page. This will be your first table - TABLE #1.

Nested within the RIGHT-HAND CELL of this table will be TABLE #2, which is the table you are putting all your content in - it needn't actually BE a table as such, just the content of the whole of the rest of your page.

Now to set your Table #1 : I used to set actual widths until it dawned on me that not everyone is using a 17" monitor! so now I use percentages, but that's a matter of choice - you can set the width in pixels or percentages, whichever you prefer:

<HTML><HEAD><TITLE>*?*?*</TITLE></HEAD>

<BODY BACKGROUND="borderedbackground.gif" BGCOLOR="x**y**z" text=**a**b**c link="1**2**3 vlink="3**2**1>

<TABLE WIDTH="100%" BORDER="0">



(You MUST set the border of this table to 0 or you'll get lines where you don't want them!)


To set the table cells, you need to know the width of your background's border: open it up on Paint Shop Pro or whatever graphics program you use, put the cursor on the RH edge of the border and read off the width in pixels from the bottom LH bar. Then you need a transparent gif of the same width (or nearly the same - the next widest, so if your border is 125 pixels wide, use 150) - all they are is a transparent "box" 1 pixel high and however many pixels wide. They take up negligible memory!


Use this transparent gif as the image in the left-hand cell : the height of the cell doesn't matter as it will extend all the way down the page.


<TR><TD><IMG SRC="150transp.gif" alt="transp" height="1" width="150"></TD> (or whatever width you need)

The NEXT (right-hand) cell contains all your page content, whatever you choose it to be. Just treat this section as an ordinary page:


<TD> ********Your page here********</TD></TR></TABLE>


If your page content is a table, then you will have a table within a table -

<TABLE><TR><TD>**transp.gif**</TD><TD>

<TABLE><TR><TD>**table content**</TD></TR></TABLE></TD></TR></TABLE>


- don't forget to close both tables!!

So, to summarise, (and you can cut-and-paste this bit if you like - just substitute where the red text is):

<HTML><HEAD><TITLE> *?*?*</TITLE></HEAD>

<BODY BACKGROUND="borderedbackground.gif" BGCOLOR=" x**y**z " text=" a**b**c" link=" 1**2**3" vlink=" 3**2**1">

<TABLE WIDTH="100%" BORDER="0">
<TR><TD><IMG SRC=" 150transp.gif" alt="transp" height="1" width="150"></TD>
<TD> ********The whole of your page here******** </TD></TR></TABLE>

</BODY></HTML>


It may LOOK complicated, but it isn't really, and once you actually understand what you are doing you should find it no problem at all.

back to HTML help pages index

Email me if you need any more help with this.