Left Border Backgrounds

A special thank you to Wendy with Wendy's Design Studio, LLC for her help in making this tutorial possible.

Left borders are actually very easy to set up. You have 3 basic elements in a left border script. First, you have your left border background graphic. Thats the easy part. You can find many to choose from on the internet, on my site or make your own. Second, you will need a 'spacer' graphic. The spacer graphic is an invisible graphic that can be easily resized. The only thing in the left column of your table will be the spacer graphic sized slightly larger then your border width. You can right click and copy the spacer graphic to your hard drive here.

Right click and copy here!

I have added borders to the spacer graphic here for purposes of finding it to download. The actual graphic is invisible. I use the spacer graphic so often that I keep mine on my desktop.

Hint: I also use the spacer to put between graphics on a page that I want a small space between. As an example, you might look at the source code of my main index page. The guestbook, view and sign graphics are all seperated by the spacer. You can adjust the width of the spacer to whatever amount of space you want between objects.

Third, you have a basic 2 column table. The left column will roughly be your border width and the right column will accomodate the body of your document. In the example below, I have added spaces between sections of the script to make it easier to follow and understand.

<head> </head>
<body background="border background graphic.jpg">

<table cellpadding=0 cellspacing=0 border=0 width="95%">

    <td><img src="spacer.gif" width="120" height="1" border="0" alt="" </td> (left column)
    <td> Insert the entire body of your page between these tags </td> (right column)


You can also view the source code of this page for another example of a left border set up. In your menu bar, click on 'View' then on 'Source' to see the code I wrote for this left border page.

Site Index | Border Backgrounds

Do you need one source for great web tools? I recommend Bravenet to build, promote and monitor your web site.