PSP 10


Web Design


Mailing List

Terms of Use

Contact Me

Centre Box

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

Ok, you've got layers figured out and have been having a great time creating different looks with different width layers right? I hope you're saying yes right now!!! (if you're not and you're having problems please feel free to email me using the contact me button on the menu)

Now you want to know how to make the centre boxes you're seeing all over MSN groups and the web in general? Well here's how!

When you've added the amount of layers you want round the outside of your page click on the Centre Justify button so your cursor is in the middle of your page.

Now click on the Add Table icon

Set Rows and Columns to 1

Set Cell Padding to 3 (or whatever width you want your table to be)

Set Cell Spacing to 0

Set Borders to 0

Click on Background

Paste in the URL of the background you want to use.

Click Insert table.

You will now have this again (with your background tile in obviously LOL)

Click in the centre of the square (when you click in the centre of each new table it's a good idea to press the backspace key on your keyboard. The reason for this, a space is added to each table and if you leave the space in it can distort your tables) then put a tick in the box at the bottom of the page where it says Use HTML to create your page

You now need to place your cursor right next to the 3 where it says cell padding=3

Press the space bar once then instead of typing width=100%, type


You will now have this

We now need to add another table, same way as before but this time when you go to put the width in you need to put width=100% again. This is because we want it to fill 100% of the table it's inside.

Don't worry about the first layer looking too wide, it will even out when you add content to your box.

Click here to see the result.

You can leave it at that or if you like you can add more tables to get the look you like, each time adding width=100% to the html code.

Click here for another example

I hope this tutorial helped you learn a little more about using tables to create pages :o)



Site Hosted & Designed by SLANTDigital 2005
All Rights Reserved

Counter reset 19 November 2005