28172 sujets

CSS et mise en forme, CSS3

Centrer un liste horizontal sous IE

Oui oui, saleté de IE Smiley ravi ...

J'ai une div dans laquel je met une liste ave un attribut float:left; pour la rendre horizontal, cette liste est centré dans ma div, cela marche sous firefox, par contre sous IE, la div elle reste bien en place pas de soucis mais la liste c'est enormement decalé sur la droite.
Alors voilà je voulais savoir si il y avais un attribut css pour IE afin de recentré ma liste

Voilà mon code css



#li1{
width:900px;
height:100px;     
left: 50%;
position: absolute;
margin-top: 40px;
margin-left: -450px;
text-align:center;
}

#li1 ul {
		
list-style-type: none;
position:absolute;
}
		
#li1 li{
		
list-style-type: none;
margin-top:0px;
float:left;
margin-right:20px;
}


et mon code html



	<div id="li1">
	<ul> 
		<li> <a href="index.php" >Accueil</a></li> 
		<li> | </li>
		<li> <a href="#Pr&eacute;sentation" >Pr&eacute;sentation</a></li>
		<li> | </li>
		<li> <a href="#Artworks" >Artworks </a></li>
		<li> | </li>
		<li> <a href="#Guides" >Guides </a></li>
		<li> | </li>
		<li> <a href="#Vid&eacuteos;"> Vid&eacute;os </a></li>
		<li> | </li>
		<li> <a href="enquete.php" >Enqu&ecirc;te </a></li>
		<li> | </li>
		<li> <a href="livreor.php" >Livre d'Or</a></li>
		<li> | </li>
		<li> <a href="liens.php" >Liens</a></li>
		<li> | </li>
		<li> <a href="contacts.php" >Contacts</a></li>
	</ul>
	</div>




Si quelqu'un a une solution

Merci d'avance Smiley biggol
Modifié par Grmmpfff (23 Apr 2009 - 14:27)
Bonjour aussi

Je constate que tu sais utiliser les boutons "citer" et "couleur", pour présenter du code, il est cependant préférable d'utiliser le bouton "code". Je te remercierais de bien vouloir éditer ton premier message afin de corriger sa présentation.

a écrit :
Oui oui, saleté de IE...


IE, c'est vague, de quelle version parle tu ? Même si dans 80% des cas il s'agit d'IE6, ce n'est pas assuré.

Concernant ton problème, il serait plus facile de te répondre avec une page en ligne ou le code HTML complet.

Une question cependant, pour faire avancer le shimili, est-ce que ton positionnement en absolu est justifié par quelque chose ? Si oui, quoi ? Car le plus simple (au du moins ce que cause le moins de problème) est d'utiliser des marges gauche et droite automatiques.

Accessoirement tu positionne également "ul" en absolu, sans préciser de valeur de positionnement, les valeurs par défaut risquent très fortement d'être top:0 et left:0.
Bonjour aussi Smiley ravi *se met une claque*

C'est bon j'ai edité mon post ^^ Smiley fache

et j'utilise IE8 voilà Smiley cligne

je vais essayer ta solution en ajoutant les margin à mon ul Smiley cligne
Modifié par Grmmpfff (23 Apr 2009 - 14:31)
Pour les margin-right:auto; et margin-left:auto; cela fonctionne parfaitement, ma liste et centré sous IE et FF.

Par contre, le margin-top pour la div et la liste ne fondtionne pas :o, impossible de definir son positionnement verticale Smiley ohwell . Du moins je ne sais pas comment on fais a par margin-top
J'ai trouvé une solution toute simple



#li1 ul {	
list-style-type: none;
left:50%;
}


en retirant le position:absolute; et juste avec le left:50%; cela fonctionne sur les 2 navigateurs Smiley cligne

Voilà, encore merci

Bye
Le left:50% ne sert à rien ici puisque les attributs top, left, right et bottom n'ont une utilisé et ne sont interprété que dans le cas d'une élémént positionné (que ce soit en abstolute, relative ou fixed).

Cependant si tu considère ton problème comme résolu, je t'invite à l'indiquer
Administrateur
Hello,

Sinon, une solution très simple et qui fonctionne partout sur les navigateurs récents (depuis IE6, mais pas sur FF2), c'est display : inline-block Smiley cligne
Sujet clos
Aller à