Relative positioning

[enchant]

Occasionally when I design a page, the outside background will be a somewhat dark color, and the area where the primary information will appear will be white, or a light color. This area is a cell of a table.

For design interest, I'll sometimes round the corners of this main window.

Up to now, the only way that I know of to put these rounded graphics into the lower corners is by creating additional rows and cells - it's kind of kludgey. It works, but it puts restrictions on what I can do in that area.

Is there a way, using CSS positioning, to position a graphic relative to another object, e.g. the lower-right corner of a table cell? I understand how positioning works relative to the upper-left corner of the browser window, but I haven't found any good documentation for anything other than that.

Thanks for any help. Let me know if I'm not being clear with what I want.

[coopersita]

What you need to do is add your corner images as background images, and then adjust the positioning:

td.bottomright { background: url(images/bottomright.gif) no-repeat bottom right }

Those corner images are not really content, so they shouldn't be images in the html, but background images.

You can also check out this tutorial on how to make rounded corner boxes with css (no tables):

[a_list_apart.com...]
(take the underscores from the address to make it one word: #*$!, for some reason when I do so, it destroys my url)

[enchant]

Thanks for the reply. After doing a lot more searching around, I actually found that link you posted myself and learned what I needed from it.