|
In the first part of this tutorial, we saw how to make a rounded rectangle on the page which will expand as content is added to it.
To do this, we created a 3-row table with images in the top and bottom cells, the middle cell being where the content will appear.
Finishing it off:
Now we have to make some adjustments to the table's properties, so that everything will line up properly.
First, we need to apply the "rounded" custom style to the middle table cell. This will cause the cell to display the left and right borders we set in this style, making the sides for the rectangle.
Select the cell, and in the Cell Properties palette, click the Cell button and select the .rounded Custom style as shown:
Now, type some text into the middle table cell - any rubbish will do. We need to do this as we'll be removing all the table borders, cell spacing and padding, as well as the non-breaking spaces, and this will cause the cell to collapse if there's no content in there.
Next, we need to re-size the table so that it is just wide enough to accommodate our top and bottom images. Select the table and drag the right border well to the left - it will snap back to the width of your images.
We now need to remove the table borders and all the cell properties from the table so that everything will line up correctly:
Select the table, and in the Table Propeties palette, set Table border, Cell padding and Cell spacing all to zero. Remove the check mark from Generate non-breaking spaces.
You will notice that the table will "collapse" - now you can see why we needed to put that bit of text into the middle cell - without it you wouldn't be able to access the cell to type inside it.
Now you can go back and edit the text in the middle cell as required, even add images if you want.
Publish your site locally, or select Page Preview to see the results of your work.
Notes:
Because we use a table, as content is added to the middle cell it will "push" the bottom cell down to accommodate it. If we had just used a text box, we would need to manually re-position the bottom image as the text box increased in size.
Be sure you have your site settings set to Dynamic Page Layout and and Cascading Style Sheets.
This page was written and is maintained by Simon Lister.
|
