Centrer le contenu de la balise <ul>

Bonjour à tous.

Je viens vous demander vos lumières pour ce problème qui parait si simple. En effet, je ne parviens pas à centrer le contenu des éléments de la balise <ul>.

Je cherche en fait à faire un menu horizontal.

Selon les propriétés CSS que j'ai mises, <ul> prend toute la largeur dispo, mais les éléments <li> sont alignés à gauche et non au centre..

Le code étant plus court qu'un long discours, le voici:

<ul id="menu_pal">
	<li><a href="choix.php">Accueil</a></li>
        <li><a href="galeries.php">Galerie de...</a></li>
	<li><a href="choix.php?p=delete.php">Supprimer un fichier</a></li>
        <li><a href="choix.php?p=stats.php">Stats</a></li>
	<li><a href="choix.php?p=gerer_fichiers.php">Gérer les fichiers</a></li>
</ul>

Je n'ai pas mis tous les <li>.

Voici la partie CSS:

#menu_pal{
	margin: 0 auto;
	padding: 0;
	font-size:1.1em;
	font-family:"Lucida Sans", "Comic Sans MS", Verdana;
	background-color: #300b02;
	height:25px;
	line-height:25px;
}


#menu_pal li{
	float: left;
	line-height:25px;
	padding:0 10px;
	border-right: 1px solid white;
}

#menu_pal a, a:link, a:active, a:visited {
	color: #FFFFFF;
	text-decoration: none;
	text-align:center;
}

Et enfin, voici le rendu actuel sous Firefox :


Je vous remercie de votre aide.

Metalivore.
Modifié par metalivore (01 Aug 2007 - 21:57)

Bonsoir,
tu dois mettre une largeur à ton #menu_pal pour qu'il se centre horizontalement.

Effectivement, en mettant une largeur à 70% par exemple, le <ul>, si je peux l'appeler ainsi, se centre sur la page mais son contenu ne se centre pas pour autant.

En ne spécifiant pas de largeur, il occupe tout l'espace disponible, ça revient à mettre un width: 100%;

Sur les images, vous pouvez voir la place occupée par <ul> par la couleur de fond noire.

Voici la capture d'écran avec une largeur à 70%.


Je ne suis pas fortiche en CSS alors tout commentaires ou suggestions sont les bienvenus.

Merci.

J'ai trouvé une "solution". Je mets des guillemets parce qu'en fait, elle n'est vraiment pas propre.

J'ai procédé comme ceci:

<ul>
     <div>
          <li>....</li>
          <li>....</li>
          <li>....</li>
     </div>
</ul>

En donnant comme propriété à la div, une largeur de 80% et de se centrer avec le margin: 0 auto;

Si vous avez d'autres idées, je suis preneur.

Bonjour,

Oui effectivement pas glop
Dans ton contexte, donne à tes li la propriété display: inline (ils deviendront des balises in line) et peuvent être centré grace à text-align: center dans leur bloc parent.

#menu_pal{
	margin: 0;
	padding: 0;
	font-size:1.1em;
	font-family:"Lucida Sans", "Comic Sans MS", Verdana;
	background-color: #300b02;
	height:25px;
	line-height:25px;
	text-align: center;
}

#menu_pal li{
	display: inline;
	line-height:25px;
	padding:0 10px;
	border-right: 1px solid white;
}

#menu_pal a, a:link, a:active, a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
       </style>

Oui sauf qu'à partir d'un élément du menu horizontal, je rappelle de nouveau un <ul> pour faire un menu vertical.

Et il me semble, sauf erreur de ma part, qu'à partir d'un élément en ligne, on ne peut pas faire ce que l'on veut d'élément bloc.

C'est pour cela que j'ai préféré opter pour des float: left et garder le tout en bloc.

Re,

Aurait-il encore fallu que nous le sussions
Et à moins d'avoir des li de width fixe et en nombre connu et fixe ben c'est walou !!

metalivore a écrit :
Oui sauf qu'à partir d'un élément du menu horizontal, je rappelle de nouveau un <ul> pour faire un menu vertical.

Et il me semble, sauf erreur de ma part, qu'à partir d'un élément en ligne, on ne peut pas faire ce que l'on veut d'élément bloc.

Je ne suis pas certain d'avoir saisi avec exactitude ce que tu dis mais un
<li> peut très bien contenir des éléments de niveau bloc et le <li> n'est pas de type inline mais list-item, ce qui n'est pas la même chose.
Ce qui défini les imbrication possible et valide ne se situe pas au niveau de ce que l'on fait d'un élément (via la propriété display) mais des éléments eux-même et de leur emplacement dans le code. Tu devrais lire les articles/tutoriels consacrés à ces bases

Ghost ne te l'a pas fait remarqué (un oublie sans doute) mais cette structure:

<ul>
     <div>
          <li>....</li>
          <li>....</li>
         <li>....</li>
     </div>
</ul>

est invalide puisque les élément ul ne peuvent avoir comme enfant que dés éléments de liste (li).
Modifié par Hermann (02 Aug 2007 - 03:31)

Merci de vos réponses. En mettant une taille fixe en largeur, je trouve que ça ne rendait pas super car cela provoquait de gros écarts entre chaque <li>.

Pour te répondre Hermann, je disais que si je transformais un <li> en type inline, je ne suis pas certain de pouvoir créer mon second menu vertical proprement pour la raison de mettre un bloc dans un élément en ligne. Au pire sinon, je peux peut- être essayer de jouer avec le z-index.

Quant à ma structure, je sais qu'elle n'est pas bonne, c'est pour cela que j'avais rajouté des guillemets. L'ennui, c'est qu'elle fonctionne plutôt bien puisque c'est exactement le résultat que j'attends. Je reconnais cependant que niveau compatibilité entre navigateurs, cela risque de partir en cacahouète.

Je vais essayer de persévérer du côté du inline.
Modifié par metalivore (02 Aug 2007 - 11:43)

Salut,

metalivore a écrit :
je disais que si je transformais un <li> en type inline, je ne suis pas certain de pouvoir créer mon second menu vertical proprement pour la raison de mettre un bloc dans un élément en ligne.

Utiliser la propriété CSS display:inline ne transforme pas les éléments blocs en éléments inline. Cette propriété modifie le rendu, la manière dont les agents utilisateurs vont afficher l'élément, mais pas la nature de l'élément lui-même. Il est donc tout à fait valide de mettre des éléments blocs à l'intérieur de tes <li>, même si tu utilises display:inline sur ceux-ci.

Evidemment, ce n'est pas sans conséquences sur l'affichage des blocs imbriqués dans les éléments de liste, mais c'est une autre histoire

Bonjour, j'ai exactement le même problème, sauf que moi je n'arrive pas à le résoudre. Alors effectivement, avec display:table, ça marche sous Firefox, Safari… mais pas Explorer (ni 6 ni 7 d'ailleurs).

D'après le tutorial sur le centrage, il suffirait de passer le bloc en inline pour que ça marche. Mais ça ne marche pas.

Merci d'avance!

<div id="tab-menu">
	<div id="tabs-left-corner"></div>
	<div id="tabs-right">
		<ul>
			<li id="home" class="current-left"><div class="current-right"><a onclick="">Home</a></div></li>
			<li id="mix" class="after-current"><a onclick="">Mix</a></li>
			<li id="measurements"><a onclick="">Measurements</a></li>
			<li id="lab-materials"><a onclick="">Lab Materials</a></li>
			<li id="my-operations"><a onclick="">My Operations</a></li>
			<li id="my-files"><a onclick="">My Files</a></li>
		</ul>
	</div>
</div>

#tab-menu * {
	height: 38px;
}

#tab-menu {
	width: 780px;
}

#tabs-left-corner {
	background: url(../images/tab-left-corner.gif) no-repeat left;
	width: 14px;
	float: left;
	display: inline;
}

#tabs-right {
	background: url(../images/tab-right.gif) no-repeat right;
}

#tab-menu ul {
	list-style: none;
	margin: auto;
	display: table;
	text-align: center;
}

#tab-menu li {
	float: left;
	padding-left: 11px;
	padding-right: 10px;
	/* padding-right = padding-left + 1 in order the text to be centered (with separator, which is 2px width) */
	background: url(../images/tab-separation.gif) no-repeat left;
	display: inline;
	text-align: center;
}

#tab-menu .first-tab {
	/* Can't use first-child because IE doesn't support it */
	background: none;
	/* Hide first separation */
}

#tab-menu a {
	color: #525252;
	font: 0.9em/34px "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
	text-decoration: none;
	text-shadow: #fff 0px 1px 1px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
}

#tab-menu li.current-left {
	background: url(../images/selected-tab-left.gif) no-repeat;
	padding: 0 0 0 1px;
}

#tab-menu li.current-left .current-right {
	background: url(../images/selected-tab-right.gif) right;
	padding-right: 10px;
	padding-left: 10px;
}

#tab-menu li.current-left .current-right a {
	cursor: default;
	color: #666;
	text-shadow: #fff 0px 1px 1px;
	background: url(../images/cursor.gif) no-repeat center bottom;
	display: block;
}

#tab-menu li > a:hover {
	color: gray;
}

#tab-menu li.after-current {
	/* can't use .current-left + li because IE doesn't support "+" */
	background-image: none;
	/* Remove separation after the selected tab (wich already include its own separation) */
}

* html #tabs-left-corner {
	width: 14px !important;
	width: 12px;
}

* html #tabs-right {
	float: left;
}

* html #tab-menu li {
	display: inline;
	min-width: 1%;
	width: auto !important;
	width: 1%;
	white-space: nowrap;
}

Bonjour,

Un élément flottant est obligatoirement en display:block. Le display:inline est sans effet dans ce cas (sauf pour corriger le bug de double marge du flottant dans IE5.x-6, mais c'est une autre histoire).

Salut,

Sur cette page d'Heyoan :

http://www.balade-sur-la-clef-de-sol.com/test/test_ul_etirable_ok.php

bel exemple de résolution du problème.
Modifié par papyjo (26 Sep 2007 - 07:55)

Merci à vous deux.

Je vais voir tout ça et je vous tiens au courant.
Modifié par Mateo (26 Sep 2007 - 07:58)

Hello,

papyjo a écrit :
bel exemple de résolution du problème.

Tant que l'on ne tente pas de changer la taille de la police.

Salut,

On peut aussi aller voir cette page (en) avec un example édifiant

Et puis ya les tableaux aussi, hein. Personne ne brulera en enfer pour utilisation pertinente d'un tableau de mise en page.

J'ai essayé les deux exemples. Le premier ne me convient pas vraiment, car il y a "triche": la largeur du menu est fixée. Dans mon cas je ne connais pas la larguer à l'avance…

Le deuxième cas ne marche pas. Après moults essais j'avais réussi à centrer les noms de menu (je ne suis plus sûr en fait je n'arrive pas à le refaire lol) mais impossible que l'image de fond aille au bon endroit.

Je ne comprends pas que quelque chose d'aussi simple que centrer un élément dans un autre, même si on ne connaît pas sa largeur, devienne aussi compliqué…

Quelqu'un a-t-il une autre solution, car là je patauge grave…

Pour les tableaux, j'aimerais autant que faire ce peu les éviter, ils n'ont rien à faire là. Mais j'ai l'impression que je vais devoir m'y résoudre, ou alors je laisse les maso qui utilisent cette bouse d'Internet Explorer avoir un affichage moche…

Mateo a écrit :
Pour les tableaux, j'aimerais autant que faire ce peu les éviter, ils n'ont rien à faire là.

Soyons un peu rationnel: ce que tu veux faire demanderait normalement l'utilisation de display: table-cell ou de display: inline-block, qui sont les moyens «naturels» en CSS de réaliser ce type de mise en page. Or, ces propriétés ne sont pas implémentées par certains navigateurs (Internet Explorer d'une part et Mozilla Firefox d'autre part). On a donc deux options:
- soit on cherche tout de même un moyen technique de réaliser le design tel que souhaité;
- soit on modifie le design pour tenir compte de cette contrainte technique.

Pour se décider, il faut avoir connaissance des moyens détournés qui permettraient éventuellement de réaliser le design souhaité. On en a vu deux:
1. des manipulations avancées à base de positionnement CSS, manipulations dont la fiabilité reste à démontrer;
2. l'utilisation d'un tableau de mise en page, méthode dont la fiabilité est démontrée, et qui ne nuit pas nécessairement à l'accessibilité.

Le choix entre (1) et (2), voire la décision de n'utiliser aucun des deux (si aucun n'est satisfaisant), dépendra de deux facteurs: le cout de chaque moyen (est-ce que ça prend du temps? est-ce que ça plombe ma productivité genre je m'arrache les cheveux pendant une journée complète sur un détail?), et sa fiabilité (est-ce que c'est robuste? est-ce que c'est compatible? est-ce que ça ne repose pas sur un bug de tel ou tel navigateur, bug qui pourrait être corrigé et menacer la pérennité du moyen technique utilisé?).

Voili voilou. À toi de voir.

bonjour,

pour le point 1 , En faisant usage du display:table , on assure la une perrenité du code dans la majorité des navigateur , L'evolution des navigateur , implementant de mieux les normes , on verrait mal disparaitre des regles deja comprises et implémentées .

Pour le cas de IE (au moins 5.5,6 et 7) , Je vais precher a nouveau le layout ! il est possible dans de nombreux cas de reproduire un display:table ; pour un element de type block , ou le display:inline-block; , toujours dans IE , n'efface pas totalement le comportement block , car cette régle est traité a la mode Microsoft et pas W3C. Cela ajoute a la confusion , inline-block(IE) n'est pas le inline-block(opera, ...).

Bon d'abord le display:table; est le comportement d'affichage css par defaut de la balise table , qui fait que l'élément se comportant comme un block , ne vas pas occupé 100% de la largeur disponible et pourra s'élargir au dela de celle-ci. ça sert a ça , un affichage "fluide" par excellence.

IE est incapable de reproduire cette état ailleurs que sur une balise <table> ... et l'alternative possible pour un block : (display:inline;zoom:1;) , et un inline (zoom:1;).

Avec un commentaire conditionnel ,et un fichiers css dédié IE, toutes versions de IE comprenant les CC ,comprennent aussi zoom:1.

Je remet en lien un menu centré (a l'origine c'est un test menu deroulant css ) .

Je vien de faire une mise a jour , de façon a ce que les li soit fluides en fonctions des textes et de l'affichage :

http://gcyrillus.free.fr/essai/menu_deroulant.html

Alors peut-etre est ce mal aisé de mettre en place , pourtant , il s'agit au depart de monté le conteneur principale en display:table; (qui se retracte donc sur les dimensions de ce qu'il contient).
On passe ensuite ce conteneur principale en display:inline; et zoom; pour que lui aussi se retracte sur son contenu , pour le centré , on le place dans un conteneur en text-align:center; ..

Enfin , cela reste relativement simple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>Menu centré</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul {
	margin: 0 auto;
	padding: 0;
	list-style: none;
    border:1px solid #333 ;
    display:table; /* pour les besoins de centrage */
	}

ul li {
	float:left;
	padding:0 0.5em;
	background:#ccc ;
	border:1px solid #333 ;
	text-align:center;
}
</style>

<!-- supplement IE pour centré le menu -->
<!--[if  IE ]>
<style type="text/css">
/* l'ensemble de cette portion de css  sert a centré le menu en exemple */
#menu  {
    text-align:center;
    }
ul {
   display:inline;
   zoom:1;
}
</style>
<![endif]-->
</head>
<body> 
	<div id="menu">
	<ul id="menu_pal">
		<li><a href="choix.php">Accueil</a></li>
        <li><a href="galeries.php">Galerie de...</a></li>
		<li><a href="choix.php?p=delete.php">Supprimer un fichier</a></li>
        <li><a href="choix.php?p=stats.php">Stats</a></li>
		<li><a href="choix.php?p=gerer_fichiers.php">Gérer les fichiers</a></li>
</ul>
	</div>
</body>
</html>

Faudrait faire attention au mode allergique , sitot que le mot table apparait .
Sans vouloir trollé , j'espere faire comprendre 2 trucs.

GC
<edit> autant prendre le menu du premier post</>

PS, arf , c'est le vendredi !
Modifié par gcyrillus (28 Sep 2007 - 18:35)