You are currently viewing the old version of this site. To see to the new version go here

THE MENU

Full Border Background

The goal is to create a page with a border around the entire content of the page that appears frame-like. The key to doing this is to set up your page in tables and to apply a repeating pattern as a background in the center cells of the table. Ultimately, your page should look something like this.

In this example I have created a small frame image like the one on the right:

 

I then sliced it into nine sections, three rows across, three rows down to create these individual tiles:

In this example, the corner tiles are 50 pixels square; the top and bottom center tiles are 50 pixels high and 30 pixels wide; the left and right center tiles are the reverse, 30 pixels high and 50 pixels wide; and the center square ("I'll take the center square to block, Peter," sorry...bad joke) is 30 pixels square. You will need to be aware of these dimensions, as some of them will be used in the construction of your tables; others will not be used.

First of all, you will need to set up your HTML page. It is preferable to use the following in your body tag:

marginwidth="0" marginheight="0" topmargin="0" leftmargin="0"

Depending on the structure of your bordered/framed page, you may or may not want to include these attributes. What this does is get rid of all the margins so that the borders/frames/tiles will fit snuggly against the top and sides of your browser. If you will be using this framing system only as a small part of the page to highlight certain items as in this example (Sample 1), then this is not necessary. In this instance, you will want to include a background tile to match the outer edges of the frames, in this instance, this image:

Next, you will want to set up the table that will contain the tiles and content. Below is a representative diagram of the content of your table.

Top left corner tile image goes in this cell.
No table fill.
This cell is fixed in size and must be set at the same height and width dimensions as the corner tile.
Use the top background to fill this table cell.
This cell has a variable width dimensions. It will expand as needed to accommodate the width of the viewer's browser. Do not attach width tags to this cell.
Include any banner or namelate image in this cell that may come with the Environment.
Top right corner tile image goes in this cell.
No table fill.
This cell is fixed in size and must be set at the same height and width dimensions as the corner tile.
Use the left background tile to fill this table cell.
This cell has variable height dimensions. It will expand as needed to accommodate the height of the viewer's browser. Do not attach height tags to this cell.
You may also include a nested table of left-hand buttons or embellishments to create a navigation bar, if they came with the Environment.
Use the center background tile to fill this table cell.
This cell has variable height and width dimensions. It will expand as needed to accommodate the size of the viewer's browser. Do not attach height or width tags to this cell.
This is also where you put any page content.
Use the right background tile to fill this table cell.
This cell has variable height dimensions. It will expand as needed to accommodate the height of the viewer's browser. Do not attach height tags to this cell.
You may also include a nested table of right-hand buttons or embellishments to create a navigation bar, if they came with the Environment.
Bottom left corner tile image goes in this cell.
No table fill.
This cell is fixed in size and must be set at the same height and width dimensions as the corner tile.
Use the bottom background tile to fill this table cell
This cell has a variable width dimensions. It will expand as needed to accommodate the width of the viewer's browser. Do not attach width tags to this cell.
You may also include a nested table of bottom buttons or embellishments if they came with the Environment.
Bottom right corner tile image goes in this cell.
No table fill.
This cell is fixed in size and must be set at the same height and width dimensions as the corner tile.

Below is the HTML you will need to set between your <body></body> tags to create the table:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50"><img src="tile-01-01.gif" width="50" height="50" border="0" align="BOTTOM"></td>
<td background="tile-01-02.gif" height="50">&nbsp;</td>
<td width="50" height="50"><img src="tile-01-03.gif" width="50" height="50" border="0" align="BOTTOM"></td>
</tr>
<tr>
<td background="tile-02-01.gif" width="50">&nbsp;</td>
<td background="tile-02-02.gif">&nbsp;<!--insert your content here in this middle cell--></td>
<td background="tile-02-03.gif" width="50">&nbsp;</td>
</tr>
<tr>
<td width="50" height="50"><img src="tile-03-01.gif" width="50" height="50" border="0" align="BOTTOM"></td>
<td background="tile-03-02.gif" height="50">&nbsp;</td>
<td width="50" height="50"><img src="tile-03-03.gif" width="50" height="50" border="0" align="BOTTOM"></td>
</tr>
</table>

Please note where I have tagged items as either images (img src="tile-03-03.gif") or tiling table cell fills (background="tile-03-02.gif"). If you will not be placing any images in the cells with the background tiling patterns, such as a row of buttons or a banner, add a non-breaking space (&nbsp;). If you do not do this, the background tile will seem to disappear in your browser. Please be extra careful to include height and width tags for the table cell attributes in the corner cells. Failing to do so will cause extreme funkitude!

Be aware that in Environments that contain items that will go into the cells with background fills, I will create no buttons or embellishments that are wider than the respective right or left columns that they go in. These are to be stacked vertically (in a nested table if necessary), or else that will throw the table fills off. Likewise, I will make no top or bottom banner, button, embellishment higher than the top or bottom table cell. These are to be inserted horizontally (in a nested table if necessary) or else that too will throw the table fills off.

If you follow these instructions, your page will now look like this (Sample 2). When you add your content in the center cell where I marked <!--insert your content here in this middle cell-->, your page will fill out, expanding the variable width cells. You will want to include a background tile (see above) to match the outer edges of the frames if your page content is minimal as in Sample 1. In this case, you may also want to limit the width of the table as I did in Sample 1 where I centered the table and set the table width to 70%. Note, however, if you want your background to completely fill out to the edges, even if you have minimal content, you must add width="100%" height="100%" in the <table> tag

The End!


Tutorials

NEW! Review of Various Astral Plugins

SSI Image Secrets

Review of AutoFX Mystical Series

Review of AutoFX DreamSuite

Ghost Gif

Top-Bordered Background

Full-Bordered Background

Paisley-patterned Background

Pearl

Tiling Fonts at The Dingbatcave

previous page

dingbatcave.gif gemstonejewelry.gif artobjects.gif wc.gif