Onglet de dimensionnement dynamique constitué d'images

Question

J'essaie d'ajouter à ma page Web un onglet ressemblant à ceci:

En utilisant cet exemple , je l'ai eu partiellement travail. Mon cas diffère parce que je veux que la section de texte soit corrigée, mais que la section de queue redimensionne de manière dynamique pour occuper le reste du conteneur de l'onglet.

Cela a l'air bien dans IE 6, mais ne prend pas vraiment toute la largeur du conteneur. Dans Firefox 3, le rendu est mauvais: (le rouge est une zone vide entre les étendues ).

Comment obtenir un rendu correct dans IE6 et Firefox pour occuper toute la largeur spécifiée pour #Tab? # Tab4 est la zone que je voudrais dimensionner pour occuper le plus de place possible.

    <style type="text/css">
    #Tab
    {
        width: 300px;
    }

    #Tab1
    {
        background: #000 url(BlueTabSprite.png) no-repeat 0 -136px;
        display: inline-block;
        height: 23px;
        padding-left: 4px;
    }

    #Tab2
    {
        background: #000 url(BlueTabSprite.png) repeat-x 0 -242px;
        display: inline-block;
        overflow: hidden;
        padding-top: 4px;
        height: 19px;
        width: 100px;
    }

    #Tab3
    {
        background: #000 url(BlueTabSprite.png) no-repeat right -30px;
        display: inline-block;
        height: 23px;
        padding-right: 6px;
    }

    #Tab4
    {
        background: #000 url(BlueTabSprite.png) repeat-x 0 -83px;
        display: inline-block;
        height: 23px;
        width:60%
    }

    #Tab5
    {
        background: #000 url(BlueTabSprite.png) no-repeat right -189px;
        display: inline-block;
        height: 23px;
        padding-right:6px;
    }
</style>
<div id="Tab">
    <span id="Tab1">
        <span id="Tab3">
            <span id="Tab2">Test Tab</span>
        </span>
    </span>
    <span id="Tab5">
        <span id="Tab4"></span>
    </span>
</div>

Answer 1

Ceci est une version simplifiée qui fonctionne:

<div style="background: url('BlueTabSprite.png') no-repeat; width: 290px; min-width: 120px; max-width: 290px; height: 23px;">
<div style="float: right; background: url('BlueTabSprite.png') top right no-repeat; width: 10px; height: 23px;"></div>
Test
</div>

Answer 2

Je pense que la technique des portes coulissantes est peut-être ce que vous recherchez.

Answer 3

Cet outil peut être une aide.