Textured Background

With Grad Color Borders

Now that you have mastered the Grad Colored Border, using solid colors, lets explore making your page using a textured background and still using Grad Colors for your borders.

This time we will jazz the page up a little and put a double border on the left and a single border on the right.

Notice that the borders have a tubular look to them. This is accomplished by making 2 <td> cells having the same width, color, grad color and using the gradangle attribute to shade them correctly.

Remember how we used a small <td> cell of about 10-20 pixels to move our body coding to the right!! Well we are going to use the same technique to keep the body of our page from encroaching on the right border that we are going to construct.



    Page Construction

  • Body Code

This is the body code that we must start with. Use your own colors and backgound but the background should be seamless or textured for the best results.

<body bgcolor="#000000" background="../b/75.jpg" text="#336666" hspace=0 vspace=0 link="#ee82ee" vlink="#ee82ee">



  • The Table

Since we have removed the borders that Web Tv puts in, by use of the vspace=0 and hspace=0 attributes in the body tag, we will make our table width=560. We will also set the cellpadding, cellspacing and border at 0 to achieve maximum width.

The table will have 9 <td> cells. 4 for the left border, 1 for the left spacer, 1 for the body, 1 for the right spacer and 2 for the right border. Here again, the sum of the <td> cells MUST add up to the width specified in the <table> tag.

Don't forget to center the table as PC users can set their screen widths wider than 560.

<div align="center">
<table width="560" cellpadding="0" cellspacing="0" border="0">
<tr>


  • Left Border

<td width="15" bgcolor="#c0c0c0" gradcolor="#000000" gradangle="-90">&nbsp;</td>
<td width="15" bgcolor="#c0c0c0" gradcolor="#000000" gradangle="90">&nbsp;</td>
<td width="15" bgcolor="#c0c0c0" gradcolor="#000000" gradangle="-90">&nbsp;</td>
<td width="15" bgcolor="#c0c0c0" gradcolor="#000000" gradangle="90">&nbsp;</td>


  • Left Spacer

<td width="10">&nbsp;</td>


  • Body Cell

<td width="450" align="center" valign="top">
Page coding goes here
</td>

Notice the alignment of this cell. Everthing is centered and vertically aligned so that your data will start at the top and be centered. You can easily overide this center alignment, as was done in this tutorial, by use of the <p> tag. Just set the alignment left, <p align="left"> when you want your data on the left and close the </p> paragraph tag when you want your data recentered.


  • Right Spacer

<td width="10">&nbsp;</td>


  • Right Border

<td width="15" bgcolor="#c0c0c0" gradcolor="#000000" gradangle="-90">&nbsp;</td>
<td width="15" bgcolor="#c0c0c0" gradcolor="#000000" gradangle="90">&nbsp;</td>

And finally lets close the table and our page.

</tr></table>
</div>
</body>

Back to Part I

home