Borders and spacing
Before we start, you need to download an image called spacer.gif. This file is a simple, completely transparent image that we will use to make spaces in the webpage. Right-click in the box to save the image.
[ Left hand borders ][ Top borders ][ Double borders ]
Most of the border sets that I make are left hand borders. A left hand border involves a picture or pattern along the left hand margin, with the general background colour or pattern for the rest of the page. To make your webpages look the best, you want to keep your text out of the image section of the left hand border. To do this, you need tables.
I'll put the code in first, so if you're in a hurry you can just take it and run. I will explain it below:
<TABLE>
<TR><TD><IMG SRC="spacer.gif" HEIGHT="1" WIDTH="--border width--"></TD>
<TD>--Main page content goes here--</TD>
</TR></TABLE>
- <TABLE> and </TABLE> define the table. It should be the first thing you have under your <BODY> tag and the last thing. Do not forget the </TABLE> tag or you will have NO content on your page. I learnt this the hard way. :-) Internet Explorer doesn't mind, but Netscape hates your guts if you do that.
- <TR> and </TR> define the single row for this table. You only have one row, and that row only has two columns, one for the space that will fill the border, and one for everything else on your page. Once again, don't forget the </TR> tag.
- <TD> and </TD> define your table cells. There are only two. Once again, don't forget the </TD> tag.
- <IMG SRC="spacer.gif" HEIGHT="1" WIDTH="--border width--"> inserts your transparent image. The height is immaterial in this instance, only the width matters. You must replace "--border width--" with the width of the border you are working with. Some are 110 wide, some are 180 wide and some are other widths. Experiment until you find one that looks right.
- --Main page content goes here-- is where you put your page. Simply code this section as you would normally. You can center things, insert tables or anything else you feel like. Just remember to put the tags at the end, or it won't show up.
[ Left hand borders ][ Top borders ][ Double borders ]
There are only a few top borders in this collection. There are a couple of ways of dealing with them, but the easiest and most effective (I think, anyway) is tables. Here's the required code. Explanation is underneath:
<TABLE>
<TR><TD><IMG SRC="spacer.gif" HEIGHT="--border height--" WIDTH="1"></TD></TR>
<TR><TD>--Main page content goes here--</TD></TR>
</TABLE>
- <TABLE> and </TABLE> define the table. It should be the first thing you have under your <BODY> tag and the last thing. Do not forget the </TABLE> tag or you will have NO content on your page. I learnt this the hard way. :-) Internet Explorer doesn't mind, but Netscape hates your guts if you do that.
- <TR> and </TR> define the rows for this table. You only have two rows, and those rows only have one column, one for the space that will fill the border, and one for everything else on your page. Once again, don't forget the </TR> tag.
- <TD> and </TD> define your table cells. There are only two. Once again, don't forget the </TD> tag.
- <IMG SRC="spacer.gif" HEIGHT="--border height--" WIDTH="1"> inserts your transparent image. The width is immaterial in this instance, only the height matters. You must replace "--border height--" with the height of the border you are working with. Experiment until you find one that looks right.
- --Main page content goes here-- is where you put your page. Simply code this section as you would normally. You can center things, insert tables or anything else you feel like. Just remember to put the tags at the end, or it won't show up.
[ Left hand borders ][ Top borders ][ Double borders ]
Double borders are my favourite, but they're hard to code, so I don't have very many in this collection. Once again, tables are the best way to deal with these, but you also have to make sure you have the correct width background. All my double border sets come with three backgrounds - one in 640x400, one in 800x600 and one in 1024x768. Use the one that is right for your screen width. (To check your screen width, go to your desktop properties and check "Settings".)
Here's the code. Once again, explanation follows.
<TABLE>
<TR><TD><IMG SRC="spacer.gif" HEIGHT="1" WIDTH="-- border width --"></TD>
<TD>--Main page content goes here--</TD>
<TD><IMG SRC="spacer.gif" HEIGHT="1" WIDTH="-- border width --"></TD>
</TR>
</TABLE>
- <TABLE> and </TABLE> define the table. It should be the first thing you have under your <BODY> tag and the last thing. Do not forget the </TABLE> tag or you will have NO content on your page. I learnt this the hard way. :-) Internet Explorer doesn't mind, but Netscape hates your guts if you do that.
- <TR> and </TR> define the rows for this table. You have three rows, and those rows only have one column. The middle column is the one for everything else on your page. Once again, don't forget the </TR> tag.
- <TD> and </TD> define your table cells. There are three. Once again, don't forget the </TD> tag.
- <IMG SRC="spacer.gif" HEIGHT="1" WIDTH="--border width--"> inserts your transparent image. The height is immaterial in this instance, only the width matters. You must replace "--border width--" with the height of the border you are working with. Experiment until you find one that looks right. There are two of these images in this instance. Each may need a different width.
- --Main page content goes here-- is where you put your page. Simply code this section as you would normally. You can center things, insert tables or anything else you feel like. Just remember to put the tags at the end, or it won't show up.
[ Left hand borders ][ Top borders ][ Double borders ]