Side Border Tutorial

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

Ok, let's try something different.

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

Create a new page in your group.

Click on the Add Table Icon

Set the Rows and Columns to 1

Set the Padding to 10 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 and you will have this

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 and you will have this

Click inside your first table then click on the add table icon again.

Set the Rows to 1 and Columns to 2

Set the padding and spacing to 0

Set the border to 0

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

You will have this

It's very important that you remove the spaces in each cell. Click in the first cell and press the backspace key, do the same to the second cell.

Go to the html and type in width=100% again after the cell padding=0

Un-tick the html box and you will have this

Now we need to set the width of the side border cell. Go to the HTML again and this time you need to type in width=135 next to the last <TD>

The width of your tile is shown on the properties when you go to copy the URL

Place your cursor where I've put the red line and press the space bar once then type width=135 (or whatever size your border is.

DON'T put the % sign after 135 cos we don't want this to be in percent.

You should now have it like this

image4

Un tick the HTML box and it should look like this

Click in the left cell (the longest one) and click on the add table icon again.

Set the Rows and Columns to 1

Set the padding and spacing to 0

Set the border to 0

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

You will have this.

 Click in the table and press the backspace key.

Go to the html and type in width=100% after the cell padding=0

Un-tick the html box

You will have this

You can now click in your top layer and add your content. The page will grow as you add your content.

Don't worry about the gap at the bottom of the top layer, if you removed the spaces each time you added a table the space will go when you click on create page ;)

Click here to see my example.