Home

PSP 7

PSP 8

PSP 9

PSP 10

FrontPage

Web Design

Links

Mailing List

Terms of Use

Contact Me

Top Border Tutorial

To see the printer friendly version of this tutorial, click HERE

I'm not using many screenshots for this tutorial because you should have the hang of it now ;)

For this you'll need a web set that contains a vertical border. If you haven't got one, you can use these four tiles to practice with.

Remember, if you use these tiles, you must state on the page that they are Shell and a link to Shells Designs must also be put on the page.


 

Create a new page in your group.

TABLE 1

Click on the Add Table Icon

Set the Rows and Columns to 1

Set the Padding to 20 and the Spacing to 0

Set the Border to 0

Copy and paste the URL of your tile into the background box

Click Insert Table

Click in the middle of the table and as far over to the right as you can then press the backspace key to remove the space that is automatically added, then go to the html. Type in width=100% after where it says cell padding=20

Un-tick the Html box

**********

TABLE 2

Click inside the table.

Click on the add table icon again.

Set the Rows and Columns to 1

Set the padding to 5 and spacing to 0

Set the border to 0

Copy and the paste the URL of your second tile into the background box and click Insert table.

Click in the middle of the table and as far over to the right as you can then press the backspace key to remove the space that is automatically added, then go to the html. Type in width=95% after where it says cell padding=5

Un-tick the Html box

**********

TABLE 3

Click in the second table.

Click on the add table icon again.

Set the Rows and Columns to 1

Set the padding to 10 and spacing to 0

Set the border to 0

Copy and the paste the URL of your third tile into the background box and click Insert table.

Click in the middle of the table and as far over to the right as you can then press the backspace key to remove the space that is automatically added, then go to the html. Type in width=100% after where it says cell padding=10

Un-tick the Html box

**********

TABLE 4

Click in the third table.

Click on the add table icon again.

Set the Rows and Columns to 1

Set the padding to 5 and spacing to 0

Set the border to 0

Copy and the paste the URL of your second tile into the background box and click Insert table.

Click in the middle of the table and as far over to the right as you can then press the backspace key to remove the space that is automatically added, then go to the html. Type in width=100% after where it says cell padding=5

Un-tick the Html box

**********

TABLE 5

Click in the fourth table.

Click on the add table icon again.

Set the Rows and Columns to 1

Set the padding to 0 and spacing to 0

Set the border to 0

Copy and the paste the URL of your top tile into the background box and click Insert table.

Click in the middle of the table and as far over to the right as you can then press the backspace key to remove the space that is automatically added, then go to the html. Type in width=100% after where it says cell padding=0

Un-tick the Html box

**********

TABLE 6 - TOP BORDER

Click in the fifth table.

Click on the add table icon again.

Set the Rows and Columns to 1

Set the padding to 0 and spacing to 0

Set the border to 0

Copy and the paste the URL of your top border tile into the background box and click Insert table.

Click in the middle of the table and as far over to the right as you can then press the backspace key to remove the space that is automatically added, then go to the html. Type in width=100% after where it says cell padding=0

Now we have to add the height of your top tile to the HTML.

If you're using my tiles the height is 133

Remember, we don't put the % after the height number.

Under the 6th table you will see <TD>

Put your cursor right after the D and press the space bar then type height=133 (or whatever height your top border tile is)

Un-tick the Html box

Add your content to the page under the top border and you're done :o)

NOTE: If your second table is left aligned, just put your cursor at the bottom of the table (in page edit) and keeping the button pressed drag it over to the top of the table then click on the centre align icon.

Click here to see my example

 

 

Site Hosted & Designed by SLANTDigital 2005
All Rights Reserved

Counter reset 19 November 2005