28221 sujets

CSS et mise en forme, CSS3

[Résolu] - Un centrage vertical sur base de liste/menu horizontal

Avant d'aller me coucher, je tombe sur ce problème :
- Je veux centrer verticalement les textes de mon menu, car à mon goût il manque quelques pixels (3 ou 4 peut-être) pour que le résultat soit convaincant. Il s'agit là d'un menu horizontal. j'ai tenté aussi de ne pas souffir de toutes ces maladies aigues de classsisite et autres...

Voici mon css :

#acc-header {
	background-image: url(images/acc_fondmenu.jpg);
	background-repeat: repeat-x;
	height: 50px;
}

#acc-header li {
	float:left;
	display:inline;
	margin: 10px;
	background-image: url(images/acc_boutons.png);
	width: 80px;
	height: 30px;
	text-align: center;
	color: white;
	font-size:16px;
	font-weight: bold;
}


et voici le code html :

<div id="acc-header">
		<ul>		
			<li>Accueil</li>
			<li>Forum</li>
			<li>Team</li>
			<li>Contact</li>	
		</ul>	
  	</div>


Quelqu'un à t'il une idée sur la question ? Le vertical align ne fonctionne pas, par exemple, et lorsqu'on applique un padding, c'est tous les boutons qui se décalent, très logiquement, laissant par la même occasion letexte à la même place, mais déplacé, lui aussi.
Modifié le 17 Jan 2005 - 11:59
Merci pour l'info. je me doutais bien que vertical align ne marcherait pas, et j'avais essayé line-height qui remontait mon texte au lieu de le descendre.

Cependant, j'ai effectué le code de marcarea, et tout fonctionne parfaitement. En fait, je m'apercois même que mon texte ne devait pas être centré mais un peu décalé vers le bas de quelques pixelx.

Vioici le code final

#acc-header li {
	float:left;
	display:inline;
	margin: 10px;
	background-image: url(images/acc_boutons.png);
	width: 80px;
	height: 30px;
	text-align: center;
	color: white;
	font: bold 16px/28px verdana;
	background-position: bottom;
}


Désolé pour la recherche, mais il était tard, et le seul lien qui m'a permis de trouver c'était celui montrant la méthode de marcarea. A ce propos, le lien direct que tu donnes ne va pas sur le billet mais sur le site. Il faut chercher au mois d'octobre 2004, le 18 pour le trouver. Smiley smile

Merci encore, c'est bien sympa. Par contre, mon autre post n'est pas résolu, sur le prob de IE, face à Firefox pour les href contenant une image en display: block Smiley ohwell
Modifié le 17 Jan 2005 - 17:37
Sujet clos
Aller à