|
Before you create a rounded edged box, you need to make some decisions:
Let's look at how to build each of these 3 types of boxes.
Box One: The Fixed Width & Height Box
1. Start by adding a Table to your working page. To review the process of creating a Table, see the page Insert a Table,
or click here.
2. The Table should have a single row and a single column. Set the width and location of the Table, as usual. You can tweak
these later, if needed.
3. Go to the Styles tab, click "Select" to go to the Library and find your box graphic.
Click the "Select" button at the bottom of the Library page. It will take you back to the Styles tab seen below.
4. Choose No repeat for Background Repeat. Then click OK  .
5. You will return to your working page. If the box is smaller than the Table, you can adjust your Table width by changing the
"Table Width" on the Common Properties tab.
6. You can adfust the Table height by putting your cursor inside the Table and, using your keyboard keys, hit "Enter" to increase
the height, or use your "Backspace" key to reduce the height.
7. If the graphic doesn't fill the entire Table, no worries. When the box is seen in Published Mode, the Table will not be seen.
8. If you decide to delete the box graphics, click in the Cell.
-
Then, you'll need to make a right click to see the Page Details window.
-
Choose Cell and from the "Cell Properties" flyout, click Cell Properties.
-
Go to the Styles tab, and click on None. The image will be removed from the selected Cell.
|
Page Details window
|
Cell Properties flyout
|
|
|
9. When entering Content, you will have to keep in mind, this box will not expand. See the box below.
|
Box Two: The Fixed Width, Variable Height Box
1. Make a Table that has 3 rows and a single column. To review details about creating Tables, click here.
|
Once your Table is set
on your working page,
right click in the first row
of the Table.
The Page Details window
will appear.
Choose Cell.
Then, from the
Cell Properties flyout,
choose Cell Properties. |
|
Page Details window
|
|
Cell Properties flyout
|
2. On the Styles tab of "Cell Properties" click Select to go to your Library.
Select a graphic image which looks like this:
and click the "Select" button at the bottom of the Library page. Select will take you back to the Styles tab.
3. Right click in the second row of the Table. From Page Details choose "Cell" and then select "Cell Properties."
Again on the Styles tab, click "Select." to go to your Library.
Select a graphic image which looks like this:
and click the "Select" button at the bottom of the Library page. It will take you back to the Styles tab.
4. Right click in the third row of the Table. From Page Details choose "Cell" and then select "Cell Properties." Again on the Styles tab,
click "Select" to go to your Library. Select a graphic image which looks like this:
and click the "Select" button at the bottom of the Library page. It will take you back to the Styles tab.
5. If you don't see the curved corners, your Table needs to be widened. Do a right click anywhere in the Table, and the Page Details
window appears. Choose Table, then "Table Properties." Play with the "Table Width" on the"Common Properties" tab until you
reach the desired results.
6. If you decide to delete the graphic image in any of the Cells, click in a selected Cell.
-
Then, you'll need to make a right click to see the Page Details window.
-
Choose "Cell" and from the "Cell Properties" flyout, click "Cell Properties."
-
Go to the Styles tab, and click on None. The image will be removed from the selected Cell.
Your result will look something like this: |
|
|
This box has a fixed width and variable height.
As you add content to it, it will grow vertically...
|
|
Box Three: The Variable Width and Variable Height Background Box
1. Begin with a Table with 3 rows and 3 columns.
2. Set the width of the first and last column to the approximate width of your corner images. Remember, if your Table is too big, it
doesn't matter. The Table will not be seen in Published Mode.
3. Add the below graphics and properties.
4. If you don't see the curved corners, your Table needs to be widened. Do a right click anywhere in the Table, and the Page Details
window appears. Choose Table, then "Table Properties." Play with the "Table Width" on the "Common Properties" tab until you
reach the desired results.
5. If you decide to delete the graphic image in any of the Cells, click in a selected Cell.
-
Then, you'll need to make a right click to see the Page Details window.
-
Choose "Cell" and from the "Cell Properties" flyout, click "Cell Properties."
-
Go to the Styles tab, and click on None. The image will be removed from the selected Cell.
|
Position |
Cell |
Image |
Background Repeat |
Background Position |
|
Upper Left |
Row 1, left |
|
no-repeat |
bottom right |
|
Upper Middle |
Row 1, center |
|
repeat-x |
bottom center |
|
Upper Right |
Row 1, right |
|
no-repeat |
bottom left |
|
Middle Left |
Row 2, left |
|
repeat-y |
center right |
|
Middle Right |
Row 2, right |
|
repeat-y |
center left |
|
Lower Left |
Row 3, left |
|
no-repeat |
top right |
|
Lower Center |
Row 3, center |
|
repeat-x |
top center |
|
Lower Right |
Row 3, right |
|
no-repeat |
top left |
|
And here's the snazzy results!
|
|
|
|
You can change the width of this box simply by
changing the width of the underlying table.
The height of this box will grow to fit the content put into it...
|
|
|
|
|
|