|
Bordered Backgrounds can be neat if you 'mirror' them so that your page ends up centered between two
borders. The only problem with this type of background is it looks best if the person is using the
same resolution as you. (In this case 800 X 600)
If you are using a smaller resolution then the right side border will be cut off... which still
looks OK. If you are using a larger resolution then the right side border is larger then the left. So
in order to get the proper effect from the mirrored bordered backgrounds that I've made you must be using 800 X 600.
But since that's the resolution I use... they look fine to me. :-)
You still need to make sure no matter what resolution the viewer is using that the text is centered in the bordered
background and not overlapping the borders. To do that you have to create a two-celled table. In the first cell you put a small transparent gif
which you set the width equal or slightly wider then the left border and the height = 1. You put the rest of your page in the other cell. This is how you do that:
Right after your body tag put the following lines:
<table>
<tr><td valign="left" align="top"><img src="images/invisible.gif" border="0" height="1" width="140"></td>
<td valign="left" align="top" width="470">
In the first WIDTH section you specify the width of your left border (or slightly larger) in the bordered background. In the second WIDTH
section you specify the width of the middle of your page (or slightly smaller). The difference between this code and code for left bordered
backgrounds is the width of the second cell. Normally it would say WIDTH="100%". Then
you write the rest of your page as usual. Also you might have to change the img src if your images are not in an images folder.
When you are finished, right before </body> tag you
put this line to close the table:
</td></tr></table>
That's it. Now your text will be indented to the right by the proper amount, regardless of the
browser size and centered between the borders. The WIDTH that I used in the above example is what I used for
this page but for different mirrored bordered backgrounds you might have to fool around with this number. Just try different numbers until you
get the look you want.
Don't have an invisible gif? Get one HERE.
(Right click on 'HERE' and save target as ... ...in Netscape save link as...)
I'm not going to spend alot of time making a huge amount of mirrored bordered backgrounds for the simple reason that I don't think
many people want them. But you can take a look at a few of them I made:
| 
