28172 sujets

CSS et mise en forme, CSS3

Centrer items d'un menu dans une liste inline.

Bonjour à tous, voilà, je n'arrive pas à centrer mes li, je suis ptètre bète mais j'ai cherché un peu dans tous les sens et ça marches pas... Smiley biggol

Voila le menu en question :
<div class="menu">
	<ul id="menu">
		<li><a href="index.html" title="Accueil" ><img src="home.png" alt="" /><br />Accueil</a></li>
		<li><a href="logiciels.html" title="Logiciels" ><img src="setup.png" alt="" /><br />Logiciels</a></li>
		<li><a href="materiels.html" title="Matériels" ><img src="computer.png" alt="" /><br />Matériels</a></li>
		<li><a href="webdesign.html" title="Webdesign" ><img src="google.png" alt="" /><br />Webdesign</a></li>
		<li><a href="programmation.html" title="Programmation" ><img src="prog.png" alt="" /><br />Programmation</a></li>
		<li><a href="photo/index.html" title="Arthur Photo" ><img src="photo.png" alt="" /><br />Arthur Photo</a></li>
	</ul>
</div>


Et le CSS correspondant :
* { margin: auto; } 
#menu {
	background: url(bg2.png) no-repeat top left;
	position: relative;
	display: table;
	padding: 0;
	margin: auto;
	border: 0;
	height: 86px;
	width: 900px;
	font-family: Calibri,Tahoma,Arial;
	font-size: 1.1em;
	color: #ffffff;
	text-align: center; }
#menu ul { padding: 8px 5px; margin: auto; text-align: center; position: relative; display: table; }
#menu li { list-style: none; width: 112px; float: left; display: table; padding: 7px 12px; display: table-cell; text-align: center;}
#menu li:hover { background : url(bg3.png) no-repeat top center; }
#menu li img{ text-align: center; }
#menu a { color: #ffffff; text-decoration: none; }
#menu a:hover { color: #ffffff; text-decoration: none; }


Page en ligne ici : http://arthur.andre69.free.fr


Après mon code n'est sûrement pas parfait niveau architecture, ça peut jouer...


Merci d'avance de vos avis éclairés !! Smiley lol
Modifié par Arthur69 (15 Apr 2009 - 12:21)
Effectivement, j'utilise ce float:left forcé, mais c'est pour forcer la liste à être horizontale.

Je viens de comprendre que c'est mon display qui était mauvais, je l'ai changé en inline-block, et ça fonctionne.

Merci de ton aide !!


Sujet résolu.
Sujet non résolu en fait, ça ne marches pas chez ces ******** d'IE 6 et 7.

Je vais potasser ces display, ça vient de là...


Vivement la màj vers IE8 pour tous ces "utilisateurs" (plutôt alchimistes) d'IE6...
Modérateur
bonsoir,

L'alternative IE lte 7 a display:inline-block; , pour des elements de type block , se fait a l'aide du couple : 
display:inline;zoom:1;
en passant par les commentaires conditionnels.

GC
Je n'y arrive pas lol^^

Avec IE Tab pour IE 7 sous Firefox le commentaire n'est pas interprété, et sous IE 6 aucun effet...


Voici le code xHTML :
</head>

<body>
<!--[if lte IE 7]>
#menu {
	background: url(bg2.png) no-repeat top center;
	position: relative;
	padding-left: 0px;
	margin: auto;
	border: 0;
	height: 86px;
	width: 900px;
	font-family: Calibri,Tahoma,Arial;
	font-size: 1.1em;
	color: #ffffff;
	text-align: center; }
#menu ul {padding: 8px 5px; margin: auto; text-align: center; position: relative;}
#menu li {list-style: none; width: 120px; display: inline; zoom: 1; padding: 7px 0px; text-align: center; vertical-align: middle;}
#menu li:hover { background: url(bg3.png) no-repeat top center;}
#menu li img{text-align: center;}
#menu a {color: #ffffff; text-decoration: none;}
#menu a:hover {color: #ffffff; text-decoration: none;}
<![endif]-->
Sujet clos
Aller à