Bonjour,
J'ai un truc sur lequel je suis resté collé depuis quelques temps : je cherche à faire une "barre de boutons" d'une largeur 750px, mais le nombre de "boutons" présents de la barre est aléatoire (de 2 à 5 dirons nous).
Je réussis à créer uen barre à peu près propre, mais je ne réussis pas à ce que les <div> qui fournissent les lignes de séparation entre les "boutons" se dimensionnent automatiquement.
Auriez vous des suggestions à me faire ? (en restant compatible FF / IE)
Extrait de code CSS :
Extrait de code HTML :
Merci d'avance pour vos conseils avisés.
Modifié par Webinteraction (04 Oct 2006 - 09:41)
J'ai un truc sur lequel je suis resté collé depuis quelques temps : je cherche à faire une "barre de boutons" d'une largeur 750px, mais le nombre de "boutons" présents de la barre est aléatoire (de 2 à 5 dirons nous).
Je réussis à créer uen barre à peu près propre, mais je ne réussis pas à ce que les <div> qui fournissent les lignes de séparation entre les "boutons" se dimensionnent automatiquement.
Auriez vous des suggestions à me faire ? (en restant compatible FF / IE)
Extrait de code CSS :
div.ongletBarreBouton {
display:inline;
float:left;
font-size:15px;
font-weight:bold;
height:34px;
position:relative;
top:12px;
}
div.ongletBarreBouton img {
vertical-align:bottom;
}
div.ongletBarreBouton a {
color:#333366;
text-decoration:none;
}
div.ongletBarreDroit {
background: url(http://localhost:8080/images/barreOngletDroite.gif) repeat left top;
display:block;
float:left;
height:34px;
width:4px;
}
div.ongletBarreGauche {
background: url(http://localhost:8080/images/barreOngletGauche.gif) repeat right top;
display:block;
float:left;
height:34px;
width:4px;
}
div.ongletBarreLigne {
background: url(http://localhost:8080/images/barreOngletLigne.gif) repeat-x left top;
display:block;
float:left;
height:34px;
min-width:100px;
max-width:250px;
width:auto;
}
Extrait de code HTML :
<!-- DEBUT DE LA BARRE DES BOUTONS DE L'ONGLET -->
<div class="ongletBarreGauche"></div>
<div class="ongletBarreLigne"></div>
<div class="ongletBarreBouton">
<a href="javascript:return validPage();">
Oui <img src='../images/simpleArrowRight.gif' width='20px' height='20px'/>
</a>
</div>
<div class="ongletBarreLigne"></div>
<div class="ongletBarreBouton">
<a href="javascript:resetForm();">
Non <img src='../images/cross.gif' width='20px' height='20px'/>
</a>
</div>
<div class="ongletBarreLigne"></div>
<div class="ongletBarreDroit"></div>
<!-- FIN DE LA BARRE DES BOUTONS DE L'ONGLET -->
Merci d'avance pour vos conseils avisés.
Modifié par Webinteraction (04 Oct 2006 - 09:41)