[thelist] Rounded tables and CSS

my2cents lists at vicksburgcollective.com
Fri Feb 1 13:18:01 CST 2002


hello:

i don't know of any way to do it with pure CSS. this brainstormed method
below seems do-able.

1)  you could put 4 div's (one for each corner, above with z-index) inside
a master div.

<div name="full column" style="standard square border">
         <div name="top left corner"> gif </div>
         <div name="top right corner"> gif </div>
         <div name="bottom left corner"> gif </div>
         <div name="bottom right corner"> gif </div>
</div>

2) then, do some math to track the dimensions of the master div.

3) use that info, in conjunction with a "browser onresize" (or some other
event that checks when the master div is re-sized), to position (or
re-position) the corner divs/gifs to the corners of the box. ... you're
corners will need to align up with, and overlap the border of the master div.

~~~
it's definitely not simply, but i bet you could get it working... i'd go
grab you're favorite dhtml API and start animating.  (if you're trying to
support NN3, then disregard this suggestion :x

g'luck,
nate

Nate Koechley
Webdev


At 01:50 PM 2/1/2002 -0500, you wrote:

><snip> ... a rounded corner effect ...
>I'd like to achieve a similar look but embed all of the references to
>images into the CSS1 style sheet.  It was pretty easy to change the
>background color of the title and content parts of the box, but has anyone
>come up with a trick for the corners?
></snip>




More information about the thelist mailing list