28220 sujets

CSS et mise en forme, CSS3

Centrer horizontalement une liste UL sous IE

Bonjour,

J'ai voulu centrer horizontalement une liste UL-LI.
Ok, comme d'habitude, sous firefox, j'ai obtenu tout ce que j'ai voulu avoir:
- même largeur de colonne
- et centrage horizontal

Sous IE, ce n'est pas toujours le cas:
- ni même largeur de colonne
- ni centrage

Avez vous une solution ?
Tout ce passe ICI

Voici la feuille de style correspondante:

#nav{
	float : left;
	width : 100%;
	}
#nav ul{
	list-style: none;
	float : right;
	}
#nav ul li{
   display : inline;
   width: 121px;
	}
#nav ul li a{
   float : left;
   display: block;
   text-align:center;
   width: 121px;
	}
Salut,
j'utilise souvent ce type de menus, et c'est vrai que c'est un peu délicat... (oui les ul li peuvent rendre fous Smiley biggol )
Mais j'ai trouvé sur le site http://css.maxdesign.com.au une technique qui semble bien fonctionner pour tous les navigateurs, qui est proche de celle que tu utilises, à ceci près :
dans ta css ce serait plutôt le ul qu'il faudrait mettre en float à 100%

#nav ul {
float:left;
width:100%
list-style:none;
}

Je supprimerais le float right là.
Quant à ton conteneur, soit #nav, il te reste à le positionner par rapport à ta page...
le cadre #nav n'est pas indispensable ...

ni #nav, ni le <ul> ne doivent être en float, laisse-les dans le flux ... 
float:right ;
width: 100% ;

ça n'a pas de sens Smiley cligne

ce sont les <li> qu'il faut mettre en float:left pour avoir une liste horizontale.

et dans tes <li>, tu précise la taille des liens : 
#nav ul li a {
display: block ;
width: 121px ;
}


Rem : quand tu mets un élément en float, il devient automatiquement de type bloc, inutile de préciser display:block Smiley cligne
Modifié par Sopo (29 Aug 2005 - 15:13)
j'ai dejà arrivé à le centrer sous FF, mais pas IE.

et ton conseil marche sous firefox, mais pas encore IE
yep, autant pour moi !

il faut préciser la largeur de <ul> pour que ça fonctionne :

#nav ul {
		width: 605px ;
		margin: 0 auto ;
		}
Modérateur
bonjour, je ne sais pas si tu as reussi a centrer ton menu horyzontal dans le flux,, mais c'est bien sur possible sous IE et firefox, je te met un lien vers une base xhtml/css, dans laquelle tu as un menu horizontale avec le html suivant:
<div id="menuhorizontal">
        	<div class="menuhh">
                <ul>
                <li>&lt;&gt; <a href="#" >news</a> &lt;&gt;</li>
		<li><a href="index.html" >acceuil</a> &lt;&gt;</li>
		<li><a href="chat.php" >tchat</a> &lt;&gt;</li>
		<li><a href="book.php" >livre d'or</a> &lt;&gt;</li>
		<li><a href="mailto" >contact</a> &lt;&gt;</li>
		</ul>

       </div>
</div>

(le premier div conteneur sert a centrer l'ensemble)
et le css
#menuhorizontal {
	text-align:center;

}
.menuhh {margin:0 auto;
/*aucun effet vu qu'aucune taille n'est donnée, 
c'est bien text-align center qui sert */}

.menuhh li
{
	display:inline; /* a la place de float, donc centrable */

}
.menuhh ul {/* pour minimiser les difference d'affichage d'un navigateur a l'autre */
	padding: 0px; 
	margin: 0px; 
	margin-bottom: 3px; 
}

voila j'espere que cela peut te servir..
ah la demo de ce menu dans une page (base/bidouille css Smiley cligne ) : http://gcyrillus.free.fr/xkgc11/

a plus
Sopo a écrit :
yep, autant pour moi !

il faut préciser la largeur de <ul> pour que ça fonctionne :

#nav ul {
		width: 605px ;
		margin: 0 auto ;
		}


Oui, mais je ne sais pas pour quelle raison, cela ne marche pas sous IE Smiley decu

La solution pour IE est donc d'entourer la liste d'un bloc et de centrer ce même bloc (avec margin auto et width par exemple) ou encore de centrer ses éléments avec un text-align (vu que IE le comprend mal, il centrera même les blocs)..
Modifié par Dark elf (29 Aug 2005 - 21:39)
J'ai essayé le conseil de gcyrillus ci-dessus, mais tout n'est pas la même surtout avec les style de liens,

pourtant j'ai procédé pas à pas et j'ai pensé qu'aucun détail ne m'échappera pas mais hélas, sous IE ca marche toujours pas...
Excuse moi, Dark Elf, mais j'ai testé mon code sous IE, et ça marche.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
</head>

<style>

#nav ul {
width: 616px ;
margin: 0 auto ;
}

#nav ul li {
	list-style-type: none ;
	float: left ;
	}
	
#nav ul li a {
	display: block ;
	width: 121px ;
	border: 1px solid #000 ;
	text-align: center ;
	}
</style>

<body>
<div id="nav">
 <ul>
<li><a href="#" >news</a></li>
<li><a href="index.html" >acceuil</a></li>
<li><a href="chat.php" >tchat</a></li>
<li><a href="book.php" >livre d'or</a></li>
<li><a href="mailto" >contact</a></li>
</ul>
</div>

</body>
</html>


Et tiens, un screenshot :

upload/2835-screen.jpg
Modifié par Sopo (29 Aug 2005 - 23:28)
As-tu testé la solution que je t'ai proposée ?
Tu n'avais pas grand chose à modifier... dommage que mon post soit resté de côté

/edit/
Oh oh Smiley eek j'ai c'lu voi'l un 'ros minet Smiley rolleyes
Modifié par cktoon (30 Aug 2005 - 17:52)
Il n'y a pas de raison à emboîter une "div" dans une autre, puuisqu'ul représente déjà une boîte ...
supprime le "float: right", si tu veux libérer ta liste de son collé à gauche, en lui laissant sa largeur, et son margin auto...
Si tu rajoutes des éléments pour les essayer, n'oublie pas, parfois, d'en supprimer d'autres en m^me temps...
cktoon > Smiley murf Tu avais raison à ceci près, c'est le "float: right" à supprimer pour le ul (et ne pas remplacer par left, à moins qu'il n'y ait eu erreur de copie ?)...
Modifié par Macpom (30 Aug 2005 - 17:55)
@macpom Je suis juste un chouillat méfiante avec les float:right selon les navigateurs, en particulier lorsqu'il s'agit de centrer des éléments les uns par rapport aux autres dans un cas de menu et pas seulement une image dans un bloc de texte... si je retombe sur un exemple de mauvaise gestion concret, promis je le fais partager

/Edit/
En fait le float sur le ul est pour que la couleur de fond prennent toute la longueur disponible... Précisément je fais référence à cette technique : http://css.maxdesign.com.au/listamatic/horizontal03.htm
C'est en anglais... je sais Smiley lol
Modifié par cktoon (30 Aug 2005 - 18:02)
Modérateur
rebonjour,
je ne sais pas ou tu en est, mais j'ai repris un peu ton css, avec mon idée du display inline et text-align:center; et j'ai enlevé un conteneur, j'ai bricolé sur une copie de ta page, et j'ai un resultat centré sur IE et FF.
alors ton css :
#nav{   width:100%;
	border-bottom: 2px solid #000000;
	font: 11px Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;	
  	padding: .4em 0em .4em 0em;  
	background-color: #6898d0;
	color: #333;
	text-align:center;	
	}
#nav ul{
	background-color: #6898d0;
	padding:0;
	display:inline;
	}
#nav ul li{
   display:inline;
   border-bottom: 1px solid #90bade;
	}
#nav ul li a{ 
   border-left: 5px solid #8AA1B6;
   border-right: 5px solid #8AA1B6;
   background-color: #6898d0;
   color: #fff; text-align:center;
   text-decoration: none;
  /* width: 121px; ne peut-etre applique sans un display:block;*/
	padding: .4em 1em .4em 1em;
}
#nav ul li a:hover{
	border-left: 5px solid #800000;
	border-right: 5px solid #800000;
	background-color: #FF7C3E;
	color: #fff;
	}

et le html:
<body>
<div class="fonony">

  <div class="lohany"><a href="#" title="PROMAD - ART MALAGASY"><img src="/artmalagasy/global/logo05.jpg" alt="PROMAD - 

Art Malagasy" width="350" height="100" /></a></div>
 

 
  <div id="nav" >
	<ul>
		<li><a href="?accueil=1" title="Page d'Accueil">ACCUEIL</a></li>
		<li><a href="?produit=1" title="Nos produits">NOS PRODUITS</a></li>
		<li><a href="#" title="Les nouveaut&eacute;s">NOUVEAUTES</a></li>

		<li><a href="#" title="Vos commandes - Gestion du compte">VOTRE COMPTE</a></li>
		<li><a href="#" title="Nous contacter | Entreprise - Particulier">NOUS CONTACTER</a></li>
	</ul>
  </div>


  
  <div class="ilanyHavia">

je n'ai enlever qu'un conteneur, c'est la seule modif sur le html.

a plus
Pourquoi ne pas mettre un text-align:center; à ton <ul> et un display: inline à ton <li> ?
Je fais ca tout le temps pour mes listes de liens horizontales...


Edit: autant pour moi, j'ai lu de travers le dernier post... Smiley sweatdrop
Modifié par Sylvain (30 Aug 2005 - 19:28)
Ok, tout est maintenant centré,

@ gcyrillus:
quand j'ai appliqué nav ul li a { width: 121px; }, c'était dans le but d'avoir une largeur égale à tous les liens et qu'ils remplissent bien la ligne entière...

c'est encore là mon principal souci...

Merci Smiley langue
Modérateur
mmm....

... je ne vois pas d'autres solutions (simple) que passer tes textes de liens en images clicquable pour assurer a chacun une largeur equivalente aux autres, d'un autre coté, je ne comprends plus l'interet de centré l'ensemble de tes liens si ils occupent, ensemble, 100% de la largeur !? ... ou bien je zappe quelque chose ?

a plus
ok,

merci quand même, je vais donc choisir entre les deux alternatives:
- centrer horizontal
- ou taille identique

Smiley langue
Bonjour,

Solution :

#nav { 
border-bottom: 2px solid #000000;
font: 11px Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #6898d0;
color: #333;
text-align:center;
}
#nav ul {
margin: auto;
list-style-type: none;
width: 650px;
overflow: auto;
padding: 0;
border-bottom: 1px solid #90bade;
}
#nav li {
display:inline;
}
#nav a { 
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
float:left;
width: 120px;
padding: 0.4em 0;
}
#nav a:hover {
border-left: 5px solid #800000;
border-right: 5px solid #800000;
background-color: #FF7C3E;
color: #fff;
}


Et dans le code HTML, ajouter une CSS en commentaires conditionnels pour IE Windows:

<!--[if lte IE 6]>
<style type="text/css">
#nav ul {
margin: 0;
overflow: visible;
}
#nav a {
width: 130px;
}
</style>
<![endif]-->


Détail important: si tu supprimes le prologue XML inutile (ce qui serait bien), IE6.0 reviendra en mode de rendu strict (calcul des largeurs identique au modèle de boîte CSS2) et il faudra distinguer alors deux CSS en commentaires conditionnels :

<!--[if lte IE 6]>
<style type="text/css">
#nav ul {
margin: 0;
overflow: visible;
}
</style>
<![endif]-->

<!--[if lt IE 6]>
<style type="text/css">
#nav a {
width: 130px;
}
</style>
<![endif]-->


Enfin, il faut savoir que cette mise en page supporte très mal l'agrandissement des caractères par l'utilisateur.

<edit>Attention: la syntaxe de fin des commentaires conditionnels est déformée par le forum. Voir la FAQ du forum pour récupérer la syntaxe correcte à rétablir dans le code ci-dessus</>
Modifié par Laurent Denis (04 Sep 2005 - 08:31)
Sujet clos
Aller à