Votre avis sur la méthode - Onglets

Bonjour,

j'ai une maquette à transformer en xhtml/css. Mais je bute sur un élément: l'onglet. Qui contient les liens vers les catégorie du site. Je vous joins les différentes images.

En fait j'aimerais avoir votre avis sur la meilleure méthode à utiliser pour "découper" ce menu d'onglet. Est ce que je découpe chaque onglet, est ce que je fait une barre d'onglet et je dispose dessus le texte (une barre par page, une sorte de sprite)?

Merci de m'éclairer.

Hello
moi je dis, aucune découpe, tu as un fond uni : donc background-color. faut aller au plus simple !
Peut-être un border-radius aussi, pas besoin d'image !

Oui, justement, j'ai des arrondis et j'aimerais avoir un compatibilité avec tous les navigateurs.

je dois faire ça à base de <ul> <li> ou bien à base de blocs en float:left?

Salut,

C'est la méthode à base de ul li qui est la meilleure pour faire des barre de menu. Ensuite pour l'alignement horizontal, tu applique un display: inline-block sur les li, pas reconnu par iE6, et 7 je croit, cependant. Dans leurs cas tu pourrais y aller avec les float:left pour c'est 2 navigateurs en particulier.
Modifié par juliesunset (28 Sep 2011 - 16:02)

Je ne parviens pas à obtenir ce que je veux avec ce code:

		<div id="menu">
			<ul id="onglets">
				<li class="active">Acheter</li>
				<li>Vendre</li>
				<li>Louer</li>
				<li>Gestion de syndic</li>
				<li>Gestion locative</li>
			</ul>
		</div>

#menu {
	background: url('../theme/onglets.png') no-repeat left;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	text-align: center;
	font:bold 130% Arial,Sans-Serif;
	width: 588px;
	height: 68px;
	padding-top: 0px;
	border: 1px solid;
}

#menu #onglets {
	list-style: none;
	border-bottom: 1px solid red;
	border-top: 1px solid blue;
	width: 588px;
	height: 68px;
	margin-top: 0px;
}

#menu #onglets li {
	float: left;
	height: 20px;
	margin: 2px 2px 0 2px !important;
	margin: 1px 2px 0 2px;
	border: 1px solid gray;
	height:68px;
}

Si je cumule chaque éléments <li>, je ne parviens pas à remplir en largeur la barre.

Je retourne le problème dans tous les sens, je ne vois vraiment pas comment m'en sortir... Auriez vous une idée précise du code à utiliser pour arriver à ça?

Par avance, merci.

Hello,

déjà reprends ton code

#menu #onglets li {
	float: left;
	height: 20px;
	margin: 2px 2px 0 2px !important;
	margin: 1px 2px 0 2px;
	border: 1px solid gray;
	height:68px;
}

Rien te semble étrange ? Tu as deux fois height... Et puis 2 fois les margins, dont une fois avec un !important, en gros ça sert pas à grand chose là d'avoir des doublons.
Tu peux soit fixer une largeur à tes li, soit leur donner du padding pour les agrandir. A toi de voir ce qui convient le mieux.

a écrit :
tu applique un display: inline-block sur les li, pas reconnu par iE6, et 7

Si, mais faut leur appliquer du display:inline et un zoom:-1 pour "tricher". Mais avec du inline bloc tu auras le risque d'avoir la fameuse "marge de 1px" entre tes blocs.

Merci, les 2 height c'est effectivement une erreur.

Les 2 margin c'est une technique que j'ai trouvé sur le net pour régler un problème sous IE6.

Je suis partie sur autre chose, mais je ne suis pas du tout satisfait de ce que je fais.