28172 sujets

CSS et mise en forme, CSS3

Alignement vertical du texte (mulitligne) dans un menu

Bonjour,

Je me décidée à poster sur le forum, après toutes mes recherches dans la FAQ, l'aide et les autres sites je n'ai pu trouver une solution qui marche sous Mozilla et IE 6/7.

J'ai un menu déroulant horizontal dont le texte des liens fait 1, 2 ou 3 lignes.
Et c'est là tout le problème.
Avec FF j'arrive à aligner verticalement en utilisant 
display:table-cell;

Mais sous IE impossible.

En plus, je ne peux pas définir de 
line-height
pour utiliser le 
vertical-align
puisque le texte
sur 2 ou 3 lignes est du coup trop espacé.

Voilà le HTML :

<ul id="menu">

        <li>
                <a href="#" >Accueil</a>        </li>
        <li>
                <a href="#">Entreprise </a>        </li>
        
        <li>
                <a href="#">Solaire <br />Photovoltaïque</a>
        </li>
....
</ul>


Et le CSS : 

#menu 
{
font-weight : normal; 
font-family : Arial; 
}

#menu a 
{
display:table-cell;
padding : 0; 
color : #ffffff;
text-decoration : none; 
width : 95px; 
font-size : 14x;
height:46px;
vertical-align:middle;
}

#menu a:hover
{
color:#333333;				
}

#menu li 
{ 
float:left;
vertical-align:middle;
width : 95px; 
height:46px;
}

...


Merci à vous

Julie

upload/20401-menuFF.gif upload/20401-menuIE.gif
Modérateur
Bonjour,

La logique voudrait de ne pas utiliser de flottant , inline-block et line-height.

Cependant Les versions de Firefox 2 et inferieurs n'implemente pas inline-block et dans IE , inline-block ne confere que le layout sans donner le comportment en ligne des elements de type block.

Rien n'est perdu Smiley smile , Une regle propriétaire et experimentale dans Firefox permet d'obtenir un inline-block , .. moyennant une imbrication de balise pour corriger cette regle "expérimentale" , ça tombe bien nous avons un lien imbriqué dans un item de liste !

Pour IE , nous avons les commentaires conditionnels qui vont nous permettre d'activer le layout et de rendre un comportement de type inline aux item de listes .

Il est donc possible de monter le menu sur une base : inline-block , vertical-align et line-height , puis de faire simplement les corrections d'usage a l'attention de FF2 et IE.

Pour ff2 pour li , on insere devant la regle:
display:inline-block; (regle qui sera ignorer car non-implémenter)
la regle display:-moz-inline-stack; (regle experimentale conprise et appliquée)
puis pour compensé ses effet secondaire d'empilement et de selection on applique au premier enfant : display:block; (corrige l'effet d'empilement) et position:relative; (corrige la selection) .

Pour IE 7 et inférieurs :
en commentaires conditionnels pour li :
display:inline;
zoom:1;
et pour ul on fixe une hauteur , le line-height ne se suffit pas dans IE6 (par exemple).
Pour la balise a , IE6 et 7 ne se comporte pas de la même maniere pour appliquer le line-height .. donc un nouveau CC est de rigeur.


En final , on corrige pour 3 navigateurs dont 2 quasi obsolete et dans une page avec un doctype valide on obtient l'effet escompté:
ci dessous la demos:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title> </title>

	<style type="text/css" media="screen , projection ">
	
	#menu {
		background:#F38C1D url(fd.gif) repeat-x;
		line-height:46px;
		height:46px;/* Pour IE 6 */
		}
		#menu li {
			/* FF2 et inferieurs */ display:-moz-inline-stack;
			display:inline-block;
			width:100px;
			text-align:center;
			vertical-align:middle;
			}
			#menu li a {
				line-height:1.2em;
				color:white;
				text-decoration:none;				
				/* CSS destinées à FF2 en particulier , 
				elimine les effets secondaires de la regles experimentale : -moz-inline-stack 
				*/
				display:block;
				position:relative;
				}
	
	</style>
	<!--[if lte IE 7]>
		<style type="text/css" media="screen , projection ">
		/* Correction qui applique le comportement 'inline et le haslayout
		necessaire aux element de type block pour obtenir le comportement : inline-block; */
		#menu li   {	
				display:inline;
				zoom:1;
				}
		#menu li a {	
				display:inline;
				}
		</style>	
	<![endif]-->
	<!--[if IE 7]>
		<style type="text/css" media="screen , projection ">
		#menu li a {	
				display:block;
				}
		</style>	
	<![endif]-->
</head>
<body>

<ul id="menu">
        <li>
                <a href="#" >Accueil</a>        </li>
        <li>
                <a href="#">Entreprise </a>        </li>
        <li>
                <a href="#">Solaire  <br />Photovoltaïque</a>
        </li>
</ul>



</body>
</html>


et en ligne pour les septiques : http://gcyrillus.free.fr/essai/menu-horizontal-multiligne-valign.html

tester dans opera , safari , chrome , ff2 , 3 , IE 6 , 7 et 8 ....

(ce n'est pas de la bidouille , les comportements attendus sont normaux , ce ne sont que les navigateurs qui varient .... )

GC
Merci beaucoup pour la réponse très complète. Smiley biggrin
Ca m'a l'air nikel je vais essayer d'appliquer ça à mon menu.
Merci

Julie
Sujet clos
Aller à