How would you design the css and html to divide up this rounded widget?

Question

I have the following image which I need to turn into an HTML widget on my site.

How would you divide up the divs and splice up the image to make this? It needs to be resizable.

Should I slice off the corners and have a Top-Left, Top-Right, Top-Middle, Middle-Left, Middle-Right, Bottom-Left, Bottom-Middle, Bottom-Right? What would the div structure for something like that look like?

I need to be able to place text on both the top bar and bottom bar which is why I was thinking that approach. I'm supporting IE7 so I think using image slices is probably reasonable.

I'm really curious how you would divide up the divs to create this widget structure.

Answer 1

My proxy may be blocking your image so I can't see it, but if it is a simple curved corner then use curvey corners...

http://www.curvycorners.net/

Otherwise I would do a container and a left-border, center, and right-border divs.

Answer 2

This is how I would slice the image:

For corners are 4 square images (i.e. 20px x 20px) Each corner would have absolute positioning and a z-index:1 example: top-left would be left:0 top:0 bottom-right would be bottom: 0 right:0

top-middle would be a 10px x (the grey bars height) which would be a repeat-x background image in CSS

bottom-middle would also be 10px x (the grey bars height) also repeat-x

left and right can be 10px x 10px image that would be repeat-y

You should have 3 rows (top middle bottom). The top and bottom should not contain any divs.

Middle should be 3 divs. Left middle right.

Another thing I would do is only use the images for IE browsers and use CSS to create the exact same result. It will load much quicker and would be fewer HTTP requests in modern browsers while still allowing users stuck in the stone age on IE6-7 to see the same results.

Answer 3

This may not be feasible depending on your browser compatibility requirements, but have a look at the new border-image CSS feature.