clear.gif

How to Keep Text and Graphics Off the Border With a Table


Have you ever been to a page where, when you made your browser window smaller, the text on the page slid over onto the Lefthand Border Background? This is especially aggravating when you cannot read the text if it is on the Border.

You CANNOT do that with the code on this page. To check this, Resize your browser window ("Restore") and then resize more narrow. You will see the text adjust (wrap), but it will not slide into the border. Due to the special tag I use to show the HTML codes below, it will only go so narrow, though, and then give you a scroll bar.

Keeping text away from the border is done with a Table just for this purpose.
You place this Table (except for the closing tags) immediately after the Body Tag, before you put any of your content on the page.
Here is that Table for this page:

<TABLE border=0 align="left" width=100%> <TR> <TD colspan=1 rowspan=1 width=65 align="left" nowrap> <img src="../images/clear.gif" width=50 height=10 border=0 align="left" alt="clear.gif"> </TD> <TD valign="top" colspan=1 rowspan=1> Your page CONTENT goes here. This Table has one Row, and 2 Columns - both become as long as you need for the page. The first Column you make as wide as the Border of your background - where I have width=65 in the first TD above. You also put a clear.gif or blank.gif, which is transparant, in this first Column. This keeps anything else from going in there. Usually you make this clear.gif the same width as the TD, but here I have it width=50. You must be SURE to add the closing tags last thing before the closing BODY and HTML tags, or your content will not show in Netscape, only the Background. Like this: </TD> </TR> </TABLE> </BODY> </HTML> Here is a clear.gif for you to Save to your Hard Drive and use. I have put it in a Table so you can find it. Right Click inside the Square and choose "Save Picture As".
TIPS:
1. Look at the line that starts <img src in the Table above (the one to keep text away from border) See where it says border=0 at the end of that line? When you use this Table for a new Border BG, change that to border=1 and you can then see if you have it the right width for that border. After adjusting, change back to border=0.

2. You can have other Tables for other purposes inside the Table used for the whole Page, to keep the Text away from the Border. I have put the Links on this page (below) in a Table, as well as the clear.gif above, for an example of this.

3. You can use a Table like I have around the clear.gif above to make a Border for any photo or image.

Right Click and then click on "View Source".

The HTML for this page will come up in Notepad.

Go to "File" (top left of Notepad window) and choose "Save As". You can save as either an .html file or a .txt file. Either way you will have the HTML table codes for Border Backgrounds on your computer where you can both study it and copy it to use on your pages.

Be sure to BROWSE to a location of your choice before clicking on 'Save'. By this time you should have a Folder on your Hard Drive or on a Floppy where you have all your HTML Templates (as .txt or .html) to copy from for your own Web pages.


Triple BG Example #1 Triple BG Example #2
Maiden Fair's Triple BG Codes Table Index Page

Questions