28173 sujets

CSS et mise en forme, CSS3

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 :
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&nbsp;<img src='../images/simpleArrowRight.gif' width='20px' height='20px'/>
	</a>
</div>
<div class="ongletBarreLigne"></div>
<div class="ongletBarreBouton">
	<a href="javascript:resetForm();">
		Non&nbsp;<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)