extendable header title content box problem

[XRayden]

i'm trying to create a content box with a design for the title by it's own for the first time.

 

i'm well used to css, but this one eludes me.

 

i've create it the way i would like it to be here

 

but as you can see, there is a table in this!

 

i've never seen this kind of design done without table... is it possible ?

 

CSS :

<style type="text/css">
<!--
.contentbox_wrapper {
background-image:url('images/cont_ent_bck.gif');
background-repeat:repeat-x;
border:solid #000000 1px;
}
.contentbox_entete {
height:25px;
background-image:url('images/cont_ent_txt_gauche.gif');
background-repeat:no-repeat;
padding-left:9px;
}
.contentbox_ent_txt {
background:url('images/cont_ent_txt_bck.jpg');
color:#FFFFFF;
}
.content_txt {
padding:4px;
}
-->
</style>

 

HTML :

<div class="contentbox_wrapper" style="width:300px;">
  <div class="contentbox_entete">
    <table border="0" cellspacing="0" cellpadding="0" style="height:25px;">
      <tr>
        <td class="contentbox_ent_txt">Extendable Header</td>

        <td><img src="images/cont_ent_txt_droit.gif" width="34" height="25" alt=""></td>
      </tr>
    </table>
  </div>
  <div class="content_txt">Content</div>
</div>

[haku]

Yes. If it's just one tab, then create a span, fill it with the text in the tab, set it to display: block, give it a set height and width, set the background image as the image you want to show the tab, and play with the padding to position the text where you want it. If you will be using multiple tabs, then instead of spans, use an ordered list. Follow all the steps above, then float the list items left. Use margins if you need to space them out.