Double Border Tutorial

Thanks to Tiffany at Deco-Rations! for the help a long time ago in setting up my first double bordered background. This layout works well with both Internet Explorer and Netscape in any resolution. (Another tip from Tiffany: Make sure you add enough text in the middle cell to fill four-five rows in 800x600 resolution to make sure the center cell stays the full width in Netscape.) The trick to setting the page up like this is to place your contents into one table with 3 separate cells. You will need a left tiling image, a middle tiling background, a right tiling image, and the image spacer.gif provided in the zip file below. I made the checkered background with my Gingham Background Tutorial.

You can copy the following source code and place it in a blank document:

<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>

<BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" BACKGROUND="yourmiddlebackgroundtile.jpg" BGCOLOR=#486372 TEXT=#BFD0D9 LINK=#FFFFFF VLINK=#D5BBC8 ALINK=#D5BBC8>
<TABLE BORDER="0" WIDTH="100%" CELLPADDING="0" CELLSPACING="0"><TR>
<TD WIDTH="104" BACKGROUND="leftbackgroundimage.jpg"><IMG SRC="imagespacer.gif" WIDTH="104" HEIGHT="1" BORDER="0"></TD>

<TD WIDTH="*" VALIGN="TOP">

<!--------ALL YOUR PAGE CONTENT GOES BELOW THIS POINT-------->

This is where you would place your page contents. The pink areas will need to reflect the names of your own images, the width of the left and right background images, and the width of your transparent spacer (provided in this zipfile). You'll need to place the transparent image spacer into the same folder as the html file and your other images (the height of the image spacer.gif can be adjusted as needed in case you don't have enough text to fill up a screen). Do not adjust the (*) with a number in the above TD tag as this is the code that will make the table adjust according to the size of the browser window, plus it keeps the right border from repeating.

<!--------THIS IS THE END OF YOUR PAGE CONTENT-------->

Then you'll need to end your page with these codes:

</TD> <TD WIDTH="104" BACKGROUND="rightbackgroundimage.jpg"><IMG SRC="imagespacer.gif" WIDTH="104" HEIGHT="1" BORDER="0"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Tutorial Menu

Graphic Designs © 1998, 1999 Web Elegance.
Tutorial created on August 21, 1999.