Using Bordered Backgrounds

Bordered backgrounds like this one can be found all over the web. If your wondering how to use one without having your text run into the border, this tutorial will show you how.

Bordered backgrounds are everywhere it seems. You know what they look like, the nice background graphics that have a bar running down the left (and/or right) side of the screen. In order to keep the text from covering up the design, you need to be able to indent your text to leave room for the picture. There are actually several ways to do this. For one thing, you could enclose the page text in a pair of <BLOCKQUOTE> tags. You might have to indent to more than one level using this method, like this:
 
<BLOCKQUOTE>
     <BLOCKQUOTE>
          Your text here
     </BLOCKQUOTE>
</BLOCKQUOTE>

Another way to indent the text is to use more than one <UL> or, unordered list, tags. Within the tags, you don't use the <LI>, or List Item tags, just whatever text you want. Like this:
 
<UL>
     <UL>
          Your text here
     </UL>
</UL>
 
Neither of these first two methods are exactly orthodox. Good usage dictates that you should only use list tags when you are creating a list and block quotes should be reserved for extended quotes, but they do work.
 
The third and final method, the one I use when creating these type of pages, is to create a table that has two columns. For the first column, you define an exact pixel width (a big enough number to leave room for the border) and then the second column (you don't define a width here) will hold your page text. It looks something like this:
 
<TABLE WIDTH=100% BORDER=0>
     <TR>
          <TD WIDTH="50">
               <IMG SRC="clear.gif" WIDTH=50 HEIGHT=1>
          </TD>
          <TD>
               Your text here
          </TD>
     </TR>
</TABLE>
 
The only real drawback here is that using tables can extend the time it takes for your pages to load. If, however, you create multiple smaller tables, this problem is a bit less severe. It's caused by the fact that many browsers will load an entire table before displaying any of its contents.
 
You may also have noticed the IMG tag that places the file "clear.gif" in your empty column. Why do this? The empty column works perfectly well in Microsoft's Internet Explorer. It doesn't work in Netscape. Therefore, to allow you pages to look good to people who use either browser (and these are the two programs that most of your visitors will probably be using nowadays) you must make sure to include the spacer graphic.
 
The actual size of the graphic is 1 pixel by 1 pixel, therefore, it is quite small and takes very little time to load. It's one pixel is in the color that was defined as "transparent" or invisible for this particular graphic, so it won't show (unless you forget to upload it, then things will look very strange indeed.) You can use the same trick in other places as well, in fact, in any place where you need some extra space. I indented these paragraphs using the non-breaking space tag but I could also have used the invisible graphic with a width of about 10 pixels to get the same effect. If you want to use this trick on your own pages, you can download my clear.gif and use it yourself. (To download it, right click on the link and then save the picture to a directory on your own system.)
 
Now that you know how to use bordered backgrounds, why not try creating one yourself?

Remember, if you have questions, please feel free to contact me, Irene Smith, at: [email protected]