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

I have the following image开发者_运维知识库 which I need to turn into an HTML widget on my site.

alt text http://db.tt/lRJq4s

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.

Having truly fluid boxes with drop shadows and rounded corners is a pain:

http://dev.meagar.net/misc/2198371153.png

<div class="box">
  <div class="nw">1</div>
  <div class="n">2</div>
  <div class="ne">3</div>
  <div class="w">4</div>
  <div class="e">6</div>
  <div class="sw">7</div>
  <div class="s">8</div>
  <div class="se">9</div>

  <div class="content">5</div>
</div>

• 1-4,6-9 would be positioned absolutely width various combinations of top:0, right:0, left:0, bottom:0
• 1,3,7,9 would be fixed width/height with non-repeating background and a higher z-index than 2,4,6,8
• 2,8 would be fixed height, 100% width, background-repeat:repeat-x
• 4,6 would be fixed width, 100% height, background-repeat:repeat-y
• 5 would be where your content sits

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

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.

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.