28172 sujets

CSS et mise en forme, CSS3

Menu horizontal

Bonjour,

Je suis à la recherche d'un site (ou un tuto) où je pourrais m'inspirer pour le code CSS d'un menu horizontal structuré en liste non ordonnée (ul>li>a). Je me confronte à une petite particularité qui me bloque vraiment dans le codage de la CSS.

Ce menu est donc horizontal et constitué de 10 boutons à l'arrière plan changeant lors du survol. La zone réactive doit bien entendu être le bouton entier. Chaque bouton contient un texte qui peut-être (naturellement, sans forcer le retour chariot) sur une ou deux lignes. Dans chaque bouton, le texte est centré horizontalement (simple) et verticalement (là je bloque pour que cela fonctionne avec une ou deux lignes de contenu).

Quelqu'un aurait-il une piste ? Merci ! Smiley sweatdrop
tryan a écrit :
Salut,

Peut être avec line-height ..?
line-height : largeur du menu px;


Salut,

Le line-height (fixé à la hauteur du conteneur) marche pour centrer un texte tenant sur une seule ligne mais pas deux malheureusement.

La seule solution fonctionnelle actuellement (mais non compatible avec Internet Explorer) est d'utiliser un display:table-cell et de jouer avec le vertical-align qui marche dans ce cas.
Met un display: Block pour le lien et défini une hauteur et une largeur et ca marchera

Exemple :

a {
display: block;
width: 100px;
height: 30px;
}
DevJoe a écrit :
Met un display: Block pour le lien et défini une hauteur et une largeur et ca marchera

Exemple :

a {
display: block;
width: 100px;
height: 30px;
}


Salut,

Le problème avec le display:block, c'est que le texte est bien centrable horizontalement via un text-align:center, mais pas centrable verticalement Smiley decu

Merci tout de même.
alors essaye ca


a {
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align:center;
}


En fait il faut que ta valeur de line-height et height soit égale.
Modifié par DevJoe (29 Mar 2011 - 16:08)
Bonjour,

Je tenterais ceci avec un display table-cell et un vertical-align:top;

HTML
<div id="menu">
<ul>
<li><a href="#">toto <span>a mal</span></a></li>
<li><a href="#">toto <span>va bien</span></a></li>
<li><a href="#">toto <span>rigole</span></a></li>
<li><a href="#">toto <span>pleure</span></a></li>
</ul>
</div>


CSS
#menu {font-size:1.5em;}
#menu ul {list-style: none;}
#menu ul li {display:inline;}
#menu ul li a {display:table-cell; height:5em; vertical-align:top; background-image:url(test.png) ;float:left; margin-right:1em; padding:0 1em;}
#menu ul li a:hover {background-image:url(test2.png) ;}
#menu ul li a span {display:block;font-size:0.8em;}
DevJoe a écrit :
alors essaye ca


a {
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align:center;
}


Je connais bien cette solution, c'est la meilleure quand le texte tient sur une ligne (comme souvent dans les menus). Mais quand il est sur deux lignes (pas le choix, certains textes de ce menu sont de la sorte), la seconde ligne se trouve poussée hors du bloc Smiley confus
Je cherche un peu mais je ne vois pas de solutions en CSS. C'est lien sont générés dynamiquement ou sont-ils statiques ?
Si par hasard tu sais si les liens vont être sur une ou deux lignes alors tu peux utiliser cette méthode un peu space.

Chez moi ca marche


<style>
ul {
	list-style: none;
}
	ul > li {
		float: left;
		margin: 0px 10px;
	}
		a {
			display: block;
			width: 100px;
			background: #ccc;
			text-align: center;
			border-radius: 6px;
			border: 1px solid #202020;
		}
			a.uneligne {
				height: 40px;
				line-height: 40px;
			}
			a.deuxlignes {
				line-height: 20px;
			}
</style>

<ul>
     <li><a href="" class="deuxlignes">Salut banane ca va bien ?</a></li>
     <li><a href="" class="uneligne">bien</a></li>
</ul>

Modifié par DevJoe (29 Mar 2011 - 16:36)
J'avais pas lu que le retour devait etre naturel.
Il est possible dans ce cas de laisser le a en table-cell / vertical align top et d'envelopper le texte du lien dans un span qui sera lui en inline par defaut.

mon test semble concluant et le retour chariot naturel :

HTML
<ul>
<li><a href="#"><span>toto a mal</span></a></li>
<li><a href="#"><span>toto va bien</span></a></li>
<li><a href="#"><span>toto rigole</span></a></li>
<li><a href="#"><span>toto pleure</span></a></li>
</ul>


CSS
a {
display:table-cell;
float:left; 
height:5em;
width: 70px;
vertical-align:top;
}
Pour répondre à tous...

@DevJoe: Le menu est généré dynamiquement sur base l'arbo dans le CMS. Je peux éventuellement baliser le texte affiché dans le menu (même si je ne préfèrerais pas pour le client), mais je ne peux pas passer de class à la balise li ou a. En WordPress, j'aurais pu sans problème, mais là c'est du Typo3 et je ne fais que me débrouiller. Donc le texte du menu pourrait être 
Lorem ipsum<br/>dolor sit amet
ou 
Lorem ipsum<span>dolor sit amet</span>
Donc pour la solution à base de class, c'est rapé, désolé Smiley confus

@futu : Je ne sait pas si je me suis bien expliqué Smiley confus Mon texte devrait être centré verticalement et j'avais aussi une solution à base de table-cell mais Internet Explorer ne comprend pas cette propriété bien entendu...

Un dessin vaut parfois mieux qu'un long discours, j'ai donc fait un schéma du menu.

En tout cas un grand merci à tous pour vos réponses jusqu'à présent !
fufu a écrit :
Peut-être une solution, mais en JS.

Lien


Merci. Oui, je commence à croire qu'il me faudra du JS. A la limite en display:table-cell pour Chrome/Safari/Firefox et display:block + padding-top calculé ou quelque chose du genre pour Internet Explorer.
Sujet clos
Aller à