Bonjour à tous,

j'ai un problème avec un menu à onglet... ce dernier doit-être dynamique (comprenez contenu changeant) et donc, l'image servant à l'effet roll-over doit pouvoir s'adaptée au contenu.

voici mon code...

code HTML:

<!-- // Menu Onglets //-->
<div id="menu_onglet">
    <ul>
        <li><a href="#"><div class="menu_gauche"></div><div class="menu_centre">Société</div><div class="menu_droite"></div></a></li>
        <li class="spacer">&#124;</li>
        <li><a href="#"><div class="menu_gauche"></div><div class="menu_centre">Chauffage</div><div class="menu_droite"></div></a></li>
        <li class="spacer">&#124;</li>
        <li><a href="#"><div class="menu_gauche"></div><div class="menu_centre">Plomberie</div><div class="menu_droite"></div></a></li>
        <li class="spacer">&#124;</li>
    </ul>
</div>

div#menu_onglet { float:left; }
div#menu_onglet ul {
    height:28px; 
    margin:0 20px 0 20px; 
    list-style-type:none; 
}
div#menu_onglet ul li { 
    float:left; 
    height:28px; 
    text-align:center; 
    margin:0 10px; 
    color:#3287C8; 
}
div#menu_onglet ul li a { 
    display:block; 
    height:28px; 
    font:normal 18px Arial, Helvetica, sans-serif; 
    color:#3287C8; 
    text-decoration:none; 
}
div#menu_onglet ul li a div.menu_gauche { 
    float:left; 
    width:10px; 
    height:28px; 
    padding-top:2px; 
}
div#menu_onglet ul li a div.menu_centre { 
    float:left; 
    width:auto; 
    height:28px; 
    padding-top:2px; 
}
div#menu_onglet ul li a div.menu_droite { 
    float:left; 
    width:10px; 
    height:28px; 
    padding-top:2px; 
}
div#menu_onglet ul li a:hover div.menu_gauche { 
    width:10px; 
    height:28px; 
    background:url(../images/menu_gauche.gif) no-repeat; 
    cursor:pointer; 
}
div#menu_onglet ul li a:hover div.menu_centre { 
    height:28px; 
    background:url(../images/menu_centre.gif) repeat-x; 
    color:white; 
    cursor:pointer; 
}
div#menu_onglet ul li a:hover div.menu_droite { 
    width:10px; 
    height:28px; 
    background:url(../images/menu_droite.gif) no-repeat; 
    cursor:pointer; 
}
div#menu_onglet ul li div.active_gauche { 
    float:left; 
    width:10px; 
    height:28px; 
    background:url(../images/menu_gauche.gif) no-repeat; 
    padding-top:2px; 
}
div#menu_onglet ul li div.active_centre { 
    float:left; 
    width:auto; 
    height:28px; 
    background:url(../images/menu_centre.gif) repeat-x; 
    font:normal 18px Arial, Helvetica, sans-serif; 
    color:white; 
    padding-top:2px; 
}
div#menu_onglet ul li div.active_droite { 
    float:left; 
    width:10px; 
    height:28px; 
    background:url(../images/menu_droite.gif) no-repeat; 
    padding-top:2px; 
}