Question

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.

Answer 1

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