Link to home
Create AccountLog in
Avatar of Neil Thompson
Neil ThompsonFlag for United Kingdom of Great Britain and Northern Ireland

asked on

resizable box with curved edges using css and divs

Hi

I need to be able to make a 3x3 box with curved edged (apx 4px curve) to make header tables etc but using <div>s not tables like I have to below but with no cell padding or spacing.

The boxes must be able to resize where the text may grow and shrink in the centre box and I would like the CSS and DIV layout please if you can help.

The images are all live if you need to download them at the URLs in the code.

Many thanks
Neil

<table class="atoz-table">
  <tr class="bg-light-green">
    <td><img src="http://www.shepway.gov.uk/images/box/tl_s.gif" width="8" height="4" alt=""></td>
    <td background="http://www.shepway.gov.uk/images/box/t_s.gif"></td>
    <td><img src="http://www.shepway.gov.uk/images/box/tr_s.gif" width="8" height="4" alt=""></td>
  </tr>
  <tr class="bg-light-green">
    <td background="http://www.shepway.gov.uk/images/box/l_s.gif"></td>
    <td class="text_button"><A
      href="#"><span class="atoz">A</span></A></td>
    <td background="http://www.shepway.gov.uk/images/box/r_s.gif"></td>
  </tr>
  <tr class="bg-light-green">
    <td><img src="http://www.shepway.gov.uk/images/box/bl_s.gif" width="8" height="4" alt=""></td>
    <td background="http://www.shepway.gov.uk/images/box/b_s.gif"></td>
    <td><img src="http://www.shepway.gov.uk/images/box/br_s.gif" width="8" height="4" alt=""></td>
  </tr>
</table>

Avatar of VirusMinus
VirusMinus
Flag of Australia image

are they going to be a fixed height? or they can grow horizontally and vertically?
Avatar of Neil Thompson

ASKER

Preferably grow top, left, right and bottom

all corners can be fixed at 4x8 pixels
Here you go. http://kalsey.com/2003/07/rounded_corners_in_css/

just make 4 images with your rounded borders :)
SOLUTION
Avatar of VirusMinus
VirusMinus
Flag of Australia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Very bad??

semantically incorrect is ok... but mixing content and separation for ease of use is sin?
Many thanks for your help, I've picked up some great code from the posts but GrandSchtroumpf's reply was exactly what I was after.

Thanks for your help

Neil
Avatar of GrandSchtroumpf
GrandSchtroumpf

> semantically incorrect is ok... but mixing content and separation for ease of use is sin?
Yes, mixing content and presentation is a sin.

Semantically incorrect code is necessary for rounded corners in IE6.
That semantically incorrect code can be generated using javascript, like in "nifty-corners"...  IMHO, it does not make much difference.  The result after the javascript execution is still incorrect code.  The best option is to use the least-bad semantically incorrect code (nested divs is one of them).

If you add presentational images to the html, you have both semantically incorrect code AND bad content/presentation separation, which is much worse.


The other links you posted are more-or-less fine...

"Spiffy Corners" uses javascript like nifty-corners... i don't really see the point, but at least the code is clean when you disable javascript.

"A list appart" tries to find some kind of artificial semantically semi-correct html structure that provides enough anchors for the background images...  it's still not semantically perfect and will only work for a specific structure, but at least it's a good attempt at making the code a little better.

W3C has a css2 example that uses semantically correct html, but that won't work in IE6:  http://www.w3.org/Style/Examples/007/roundshadow.html

The only one that has it all wrong is http://kalsey.com/2003/07/rounded_corners_in_css/.  Even the title of that page is wrong, it's not "in css", it's "in css AND HTML".  It's pretty much the same idea than what you can find in the W3C example except that it ruins it all by including 2 images and 2 unnecessary divs in the html.  This page is a perfect example of the kind of misleading junk that you can find on the web and that somehow gets promoted.