28173 sujets

CSS et mise en forme, CSS3

Salut à tous, j'ai un petit souci de mise en page avec un menu en liste.

En fait j'ai 8 boutons composés d'une icône et d'un texte en dessous, le tout dans un cadre de taille fixe avec 3 boutons maxi par ligne...

Le souci c'est que dans mes balises <li> mon icône et mon texte son sur la même ligne, et je n'arrive pas a définir un cadre de même taille pour tous mes boutons (sûrement du fait que je n'ai pas d'image de fond?)

voici mon code:

	<div id="menuimg">
		<ul id="menu2">
			<li><a href="#" title="Gérer les actualités du site"><img src="img/gestiondesactualites.png" />Gestion des actualités</a></li>
			<li><a href="#" title="Gérer les pages du site"><img src="img/gestiondespages.png" />Gestion des pages</a></li>
			<li><a href="#" title="Gérer les catégories du site"><img src="img/gestiondescategories.png" />Gestion des catégories</a></li>
			<li><a href="#" title="Gérer les médias"><img src="img/gestiondesmedias.png" />Gestion des médias</a></li>
			<li><a href="#" title="Gérer les utilisateurs de l'interface"><img src="img/gestiondesutilisateurs.png" />Gestion des utilisateurs</a></li>
			<li><a href="#" title="Gérer les aides disponibles"><img src="img/gestiondesaides.png" />Gestion des aides</a></li>
			<li><a href="#" title="Prendre contact avec l'administrateur"><img src="img/contacterladministrateur.png" />Contacter l'administrateur</a></li>
			<li><a href="#" title="Accéder à l'aide"><img src="img/aide.png" />Aide</a></li>
		</ul>	
	</div>



et le css pour le menu:

#menuimg{
}

ul#menu2{
white-space:normal;
overflow:auto;
margin: 0 ;
padding: 0 0 0 10px;
list-style-type: none ;
text-align:left;
width:490px;
}
ul#menu2 li{
margin: 0;
display:inline;
height:80px;
width:150px;
border:#0066CC solid 1px;

}
ul#menu2 li a{
padding: 0px 5px;
font-size:10px;
color: #524A43;
text-decoration:none;
line-height:16px;
}
ul#menu2 li a:hover,ul#menu li a:focus{
color: #000;
}



merci d'avance
Modifié par r4z (13 Dec 2006 - 10:43)
Bonjour,

Il y a juste un souci de display: inline, si tu l'utilises sur li, plus de possibilité de lui conferer des propriétés de style bloc (width, height ...) utilises à la place float : left;