There is a good tutorial on building tables with rounded corners (and other effects around the perhipery).
Basically here's how you do it:
1. Draw a box with rounded corners in Fireworks (or whatever)
2. Slice the box so that the corners are slices. All these should be the same pixel dimensions.
3. Make a east, west slice that is the same width as the corner (height doesn't matter because it's going to overlap anyway).
4. Make the north and south slices the same height as the corner (same argument with the width as #3).
Export the 8 images (4 corners, 4 other slices).
Make a 3x3 table with these attributes:
-100% width (for now)
-cellpadding=0
-cellspacing=0
-border=1 (for now)
NOT PUTTING THE ATTRIBUTE IN YOUR CODE IS DIFFERENT THAN SPECIFYING ZERO.
In the northwest, northeast, southwest, southeast tables, insert the IMAGE of the corner in the cell.
In the north, south, east and west, make the BACGROUND of that cell the appropriate image.
Make the center cell (content) 100% width.
Get rid of the 100% width (remove the width tag or set it to 760 - see below) for the table, get rid of the border (set it =0). Type content in your center cell and voila.
GET RID OF ALL   's your program has put in the cells.
Now your corner images are holding the TD's open so that the background of the north, south, east, west's TD's are showing through
Note that different browsers render a 100% cell width differently so you might want to use a transparent gif to say, hold your center cell at 760 pixels wide (my own calculated maximum innerwidth of a browser maximized on a 800x600 screen).
After you get the hang of it, you can start experimenting with stuff other than rounded corners and go crazy. I'm not an artist so I can't go crazy. But you can.
If you need more help then ask. I'm sure I could draw a very cheesy tutorial.
-Raman
Top
