Rounded Box Design

[MrGeeker]

I have a rounded box design that I want to modify to use DIVs instead of tables. I have been trying for several hours and I can't get it working right.

I am using this code now

<table class="rounded-box">
        <tr>
            <td class="top-left"></td>
            <td class="top"></td>
            <td class="top-right"></td>
        </tr>
        <tr>
            <td class="left"></td>
            <td class="content">
            </td>
            <td class="right"></td>
        </tr>
        <tr>
            <td class="bottom-left"></td>
            <td class="bottom"></td>
            <td class="bottom-right"></td>
        </tr>                
    </table>

I was trying to use the article on this website to help me but its not helping. I need to have support for top and bottom images, because I use a 3D rounded box. But this article does not support them.

I cannot figure out how to modify the code to use DIVs and use top/bottom and corner images.

Can anyone help?

http://articles.sitepoint.com/articl...s-boxes-curves

[paul_wilkins]

Here are five different rounded box techniques for you to pick and choose from. The video tutorial runs through the pros and cons of each technique too.

http://css-tricks.com/video-screenca...unded-corners/

[MrGeeker]

Thanks.

I've already used those options, but my question is related to making a box that supports a top and bottom images, not just corner images. I am using a 3D box so I also need support for top and bottom images.

None of those examples on that video use top and bottom images.

[paul_wilkins]

Thanks.

I've already used those options, but my question is related to making a box that supports a top and bottom images, not just corner images. I am using a 3D box so I also need support for top and bottom images.

None of those examples on that video use top and bottom images.

I beg to differ. The first example in the vieo and on the demo page uses a single solid image for the top and the bottom parts of the rounded box.

[MrGeeker]

I beg to differ. The first example in the vieo and on the demo page uses a single solid image for the top and the bottom parts of the rounded box.

Excatlly,
And if you've watched the video, he'll state that the problem with this design is that is does not allow the box to expand when new content is added. Its impossible to have a box using only those images that can expand. You need a box that is divided as I've done in my code example.

You cannot make a 3D box with a top and bottom, you need 8 images to make a 3D box.

If you'd look at the code example I've provided you'd see that I'm trying to do something completely different.

My code works correctly, I need to get it working with DIVs, as I don't want tables in my design.

I'll figure it out this afternoon.

[paul_wilkins]

Excatlly,
And if you've watched the video, he'll state that the problem with this design is that is does not allow the box to expand when new content is added. Its impossible to have a box using only those images that can expand. You need a box that is divided as I've done in my code example.

You cannot make a 3D box with a top and bottom, you need 8 images to make a 3D box.

With a solid top and bottom you will always be able to expand in height. It's the inability to expand in width that he's complaining about, which is a natural byproduct of using a fixed top and bottom that you seem to be wanting in the first place.

We look forward to your experiments.

[MrGeeker]

You can't do a 3D box with only a top and bottom either, its impossible

It's fine I figured out how to do it myself using DIVs today.