28173 sujets

CSS et mise en forme, CSS3

Hauteur d'un LI dans un UL

Bonjour à tous,

j'ai un menu de la forme :

			<ul id="top-menu">
				<li><a href="">aaaaaaaa</a></li>
				<li><a href="">aaaaaaaa</a></li>
				<li><a href="">aaaaaaaa</a></li>
				<li><a href="">aaaaaaaa</a></li>
				<li><a href="">aaaaaaaa</a></li>
				<li><a href="">aaaaaaaa</a></li>		
			</ul>


Avec les classes css suivantes :
#top-menu ul, li
{
	line-height: 30px;
	list-style-type: none;
	list-style-position:outside;
	list-style-image:none;
	margin: 0;	
	padding: 0;
}

#top-menu 
{
	margin-top: 20px;
	background: url(../imgs/menu_stripes.png) repeat-x top left;
	padding: 0px;
	text-align: center;
}

#top-menu li
{
	display: inline;
	padding-left: 2%;
	padding-right: 2%;	
}


tout marche a peu près comme je le veux, sauf que la hauteur de LI ne fait que la hauteur du texte et non la hauteur du UL (30px).

J'ai tenté de lui passer des height: 100% ou autres joyeusetés... sans succès...
Quelqu'un aurait-il une petite idée ?

merci d'avance ...
Salut.

Tes sélecteurs semblent un peu bizarre. Tu t'adresses à #top-menu ul alors que d'après ton code html, ça devrait être ul#top-menu. Et ensuite tu as , li qui signifie tous les li de ta page. Il faudrait peut-être relire la doc à propos de sélecteurs css.

La propriété line-height n'est dans ton cas tout simplement pas comprise, puisque ton top-menu ne contient aucun ul.
Merci de ta réponse,

en en tenant compte, j'ai modifié mon css pour obtenir ceci :
ul#top-menu
{
	margin: 0;	
	padding: 0;
	line-height: 30px;
	margin-top: 20px;
	background: url(../imgs/menu_stripes.png) repeat-x top left;
	list-style-type: none;
	text-align: center;
}

#top-menu li
{
	height: 100%;
	display: inline;
	padding-left: 2%;
	padding-right: 2%;	
}


L'affichage reste identique, cela inclu malheureusement que mes LI ne font pas pour autant la hauteur voulue.

Une idée ?
Bonjour,
à partir du moment ou tu applique un disply:inline à un élément, les propriété de taille sont sans effet.
Quelques modifications à apporter:
ul#top-menu
{
	margin: 0;
	padding: 0;
	margin-top: 20px;
	background: url(../imgs/menu_stripes.png) repeat-x top left;
	text-align: center;

}
#top-menu li
{
	display: inline;
	list-style: none;
	line-height: 30px;
	padding-left: 2%;
	padding-right: 2%;	
}
Bonjour, j'ai à peu près le même problème mais avec des li en float, pour avoir une liste horizontale.
De plus mes li sont de taille inconnue, et possèdent une bordure gauche pour avoir un effet de "trait" de séparation.
Le problème est donc que les "traits" ne sont pas tous de la même hauteur, car les li sont de taille différente. Y-a-t-il un moyen d'uniformiser leur taille ?

PS: je devrais peut-être poster dans un nouveau sujet ?
Sujet clos
Aller à