[résolu] Centrer un texte (1 ou 2 lignes) dans un menu vertical

Bonjour à tous,

J'imagine que mon problème de débutant doit être classique mais les différentes solutions que j'ai trouvées sur différents forums n'ont pas du tout résolu mon soucis.
Même ici, j'ai fouillé un peu et trouvé ceci http://forum.alsacreations.com/topic.php?fid=1&tid=42249&s=vertical
Mais j'ai rien compris à la solution finale...

Avant tout, pour étudier HTML et CSS, j'utilise Dreamweaver CS4 (version démo). J'ai aussi IE8 et Fireforx 3.2.

Voilà... c'est tout bête, j'ai un menu vertical, avec des textes d'une ou deux lignes, une image de fond, une image pour le passage de la souris.
Je n'arrive pas à centrer verticalement mon texte au centre de chaque bloc "bouton" du menu.

Côté HTML, j'ai utilisé une liste à puce : balises UL et LI + des liens...
Voici le code :

<div id=page_contenu_nav>            
     <ul>
          <li> <a href="#" title="Menu1">Chercher un membre</a> </li>
          <li> <a href="#" title="Menu2">Consulter les données d'un membre</a> </li>
          <li> <a href="#" title="Menu3">Mise à jour des données d'un membre</a> </li>
          <li> <a href="#" title="Menu4">Poser une question sur un membre</a> </li>
          <li> <a href="#" title="Menu5">Contactez-nous</a> </li>
     </ul>
</div>

Et voici la partie CSS :

#contenu_nav {
}	

#page_contenu_nav ul {
	width:170px;
  	margin:0;
	padding:0;
	text-align:center;
}

#page_contenu_nav li {
	height:40px;
	list-style-type:none;
	line-height:50px;
}


#page_contenu_nav li a {
	display:block;
	line-height:15px;
	height:40px;
	width:170;
	vertical-align:middle;
	background-image: url(images/Btn_Normal.jpg);
	background-repeat: no-repeat;
}

#page_contenu_nav li a:hover  {
	display: block;
	height:40px;
	width:170px;
	vertical-align:middle;	
	background-image: url(images/Btn_Over.jpg);
	background-repeat: no-repeat;
}

Il doit y avoir une erreur ou une chose que je ne fais pas pour que mes textes, tant sur une ligne que sur deux, soient alignés verticalement.

J'ajoute aussi une image du résultat actuel...

Merci à tous pour votre aide et vos remarques.
Bon dimanche à tous.

Modifié par LiquidBrain (10 Jun 2010 - 05:38)

Coucou !

En fait, l'attribut CSS vertical-align ne fonctionne que sur les tableaux, pas sur les a ou autres balises, ce qui explique pourquoi ton instruction vertical-align n'est pas pris en compte.

Je te conseille de lire cet article : http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html

Je pense que t'y trouveras ta réponse

Bonjour,
Procédons par ordre. De gauche à droite…



étape 1 : « copi-collons » ton code, ajoutons une couleur et une bordure pour y voir clair. Constatation : les textes chevauchent les cases du menu.

étape 2 : pour corriger ça, enlevons tout ce qui bloque l'expansion : c'est à dire qu'il ne faut pas imposer de hauteur fixe… donc enlevons toutes les hauteurs 40px que l'on trouve (li a etc…) maintenant, tout rentre bien dans chaque case.

étape 3 : ajoutons des padding top et bottom de valeurs égales pour les ancres (a). J'ai choisi 10px… Hop, c'est centré verticalement !

Merci pour vos réponses, j'étudie ça...

Par contre je sais d'avance que la solution d'Aureance ne tient pas compte d'une chose importante pour moi : les images de fond et de survol... qui en plus, ont une taille fixe.
Mais peut être y'aura-t-il un détail qui m'inspirera...

A bientôt,
Liquid.

Bonjour,

Il est difficile d'utiliser une image de taille fixe pour habiller un élément dont le contenu est variable : nombre de lignes et taille de la police affichée chez le visiteur… Il semble plus simple de partir sur le principe de la flexibilité avec une image de ce genre :



Cette même image peut être appliquée pour les états "normal" et "survol" en n'en modifiant que la position :

a {   
    background: #693 url("menu-bg.jpg") 0 25% repeat-x; 
}  
a:hover {       
    background: #360 url("menu-bg.jpg") 0 75% repeat-x; 
}

En espérant que ce détail t'inspirera…

LiquidBrain a écrit :
Par contre je sais d'avance que la solution d'Aureance ne tient pas compte d'une chose importante pour moi : les images de fond et de survol... qui en plus, ont une taille fixe.

Bah, si tu as mal préparé tes images aussi...
Au vu de ce que tu as montré, il n'y a pas de raison pour que l'image de fond de tes éléments de menu ne prévoie pas une extensibilité en hauteur conséquente. Même si ton résultat «idéal» souhaité est un élément de menu de 40px de haut (par exemple), il ne faut pas figer la hauteur à 40px mais plutôt utiliser un min-height et prévoir un fond (couleur de fond ET image) pour un affichage jusqu'à 80px de haut par exemple.

L'astuce proposée par Aureance est intéressante. Pour ma part je préfère mettre les deux parties de l'image côte à côte, et passer d'un background-position: left center; à un background-position: right center;

Florent V a écrit :
Pour ma part je préfère mettre les deux parties de l'image côte à côte, et passer d'un background-position: left center; à un background-position: right center;

Cette méthode est meilleure que la mienne car avec mon histoire de pourcentage sur plusieurs lignes à l'état normal (position y 25%) m'images est axée sur la première ligne et, au survol (position y 75%) l'axe est plutôt sur la dernière ligne… Je ne sais pas trop pourquoi.

Ton truc est "plus meilleur bien".

Merci à tous pour votre aide !!!
Mon problème est résolu... grâce à vous