28173 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer un ensemble d'éléments de liste

Bonjour à tous,

Ja vais sans doute me faire taper sur les doigts, mais je suis dans une impasse. Mon code XHTML est le suivant :
<ul>
	<li>1</li>
	<li>2</li>
	...
</ul>
Sachant que je ne connais pas le nombre d'éléments li...

Je souhaite faire figurer ces éléments sur une même ligne, et donner une largeur fixe (par exemple 50px) à chacun.

Jusque là, la solution qui me parait correcte est
ul, li {list-style: none; margin: 0; padding: 0;}
li {float: left; width: 50px;}
Mais que faire si je souhaite centrer l'ensemble des éléments ? Je ne connais pas leur nombre, donc je ne peux pas appliquer une largeur à l'élément ul. Si j'utilise "display: inline", je ne pourrai pas leur imposer une largeur.

Voici un aperçu de ce que je voudrais obtenir, avec une bordure rouge autour des éléments li :
upload/9115-liste.jpg

Merci d'avance pour vos réponses.
Modifié par Eldebaran (29 Nov 2006 - 09:50)
Bonjour ... Smiley smile

Au risque de dire une bêtise...
Ceci ne pourrait-il pas fonctionner : 
padding:0 auto;

Ca marche pour les marges externes, pourquoi pas pour les marges internes ? Smiley rolleyes
Cygnus a écrit :
Ceci ne pourrait-il pas fonctionner : 
padding:0 auto;
Bien tenté, mais mauvaise pioche...

Merci quand même. Smiley smile
Modérateur
bonjour,

je crois que j'avais deja laché ça sur le forum , mais je n'ai pas retrouvé le topic:
<!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"><head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Sans titre !</title>


<style type="text/css">



ul, li, body {
	margin: 0;
	padding: 0;
}
ul  {
	text-align: center;
width:100%;
}
li {
	display: inline;
}
li a {
	display: table-cell;
	display: inline-block;
	height:30px;
	width: 150px;
	background-color: #abc;
	vertical-align:middle;
	margin:3px 3px 0;

}
</style>
<!--[if IE]>
<style type="text/css">
li a {
	margin:3px 3px 0;
	
}
</style>
<![endif]-->
</head><body>

<ul>
	<li>
	<a href="#" title="#">lien 1 </a>

	</li>	
	<li>
	<a href="#" title="#">lien 1 </a>
	</li>	
	<li>
	<a href="#" title="#">lien 1 </a>
	</li>	
	<li>
	<a href="#" title="#">lien 1 </a>

	</li>	
	<li>
	<a href="#" title="#">lien 1 </a>
	</li>	
	<li>
	<a href="#" title="#">lien 1 </a>
	</li>	
</ul>
</body></html>


peut-etre la base que tu recherche. tester dans opera , FF et IE 6

++
Merci beaucoup gcyrillus, ça marche en effet avec IE 6, FF 1.5 et Opera 9.

J'avoue que mes connaissances sont nulles au sujet de inline-block et table-cell.

J'ai adapté le code à mon problème de la façon suivante :
[b]HTML (sur une seule ligne, sinon il y a un espacement entre les éléments quand ils sont en ligne)[/b]

<ul>
<li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li>
</ul>

[b]CSS[/b]

ul, li, body {margin: 0; padding: 0;}
ul {text-align: center;}
li {display: inline;}
li span {display: table-cell; display: inline-block; width: 50px; border: 1px solid red;}
Par contre, j'ai des questions :
- Pourquoi est-ce que cela change quelque chose de mettre deux attributs display à la suite ? Je pensais que la seconde valeur écrasait systématiquement la première (quitte à prendre la valeur par défaut si elle n'était pas reconnue).
- Est-ce que l'on peut se passer dans ce cas précis des "span" ?
- Est-ce que l'on peut régler le problème d'espacement entre les éléments autrement qu'en condensant le code XHTML ?

Bon, en tout cas je crois qu'il va falloir que je me documente sur ces aspects des CSS... Est-ce que quelqu'un a de bons fils à me conseiller, ou un bouquin expliquant ces aspects avancés des CSS ?

Merci. Smiley smile
Eldebaran a écrit :
Bon, en tout cas je crois qu'il va falloir que je me documente sur ces aspects des CSS... Est-ce que quelqu'un a de bons fils à me conseiller, ou un bouquin expliquant ces aspects avancés des CSS ?

Pas sûr que des livres existent qui parlent des bidouillages que l'on peut faire pour contourner les défauts d'implémentation de CSS 2.1 par les divers navigateurs...

Dans l'exemple donné par gcyrillus, il me semble que l'on joue sur deux déclarations de propriétés peu/mal implémentées par les principaux navigateurs du marché, de sorte que :
- Opera, Safari et Konqueror retiendront display: inline-block ;
- Firefox retiendra display: table-cell (vu qu'il ne comprend pas inline-block) ;
- Internet Explorer retiendra display: inline-block, mais l'interprète bizarrement (et du coup on se retrouve à marcher en terrain miné).

Je dirais donc que ce que tu veux faire est pour l'instant impossible à faire sans trop se prendre la tête et en dehors de manoeuvres d'expérimentations qui ne sont pas destinées à l'utilisation en production. Donc, à l'heure actuelle et en attendant un meilleur support de display: inline-block par IE et Firefox, il faudra se limiter aux deux techniques connues, malgré leurs limites :
- bloc conteneur dont on connaît la largeur + marges automatiques ;
- éléments de contenu en display: inline et texte centré.
Modérateur
bonsoir.
<edit> ah , pas vue le post de mpop</edit>

les attributs appliqué a display sont dues au fait que Firefoxe ne
comprends pas le inline-block qui est dans ce cas le mieux adapté.


Inline-block donne a l'elements concerne la particularite d'etre
dimensionnable tout en se comportant toujours comme un element en ligne.

Le span(ou autre) est necessaire (pour firefoxe en tout cas ), car le
display:table-cell appliqué directement a li , va faire que <ul> va se
comporter comme un <tr> et donc les li comme des cellules ... du coup
tout le monde va rester sur une ligne et se partager l'espace en largeur.
(voir les proprieté display:table et compagnie qui reprennent des comportement de tableau , en principe l'ensemble de la methode est a applique a tout un groupe de balise afin de s'assurer de la stabilite du comportement css attendue de chacunes de ces valeurs)

J'imagine que tu as deja remarqué que dans firefoxe les elements en
display:table-cell contenu dans li se compriment tant qu'ils peuvent avant
de passer a la ligne.(display:table-caption sera plus aproprié)

Le display table; tout cours ne convient , car de type block , un saut de
ligne est automatiquement appliqué en ignorant outrepassant le inline
appliqué a <li> , et comme le "inline-table" n'existe pas dans firefoxe que
le display:table-caption , va se resumer a n'afficher qu'un seul element
par conteneur , pas de soluce (a ce que je voit) autre que d'utiliser une
autre balise .

Donc pour avoir le comportement centrage des li , on va seulement
mettre la liste en "inline" , et trouver un moyen d'y incorporer des
elements qui ne seront pas de type block , flottants ou en position
absolute., mais qui sont dimensionnable, reste alors:

pour IE:
un element inline avec dimension + zoom:1 ou display:inline-block; (qui
ont cette effet de doté l'element de layout sans en modifier le
comportement de base ).

Pour opera et ceux qui connaissent le display :inline-block; va tout a fait
nous donner ce que l'on recherche (okay d'une pierre 2 coup IE entre en
jeux facilement et par hasard ?).


et pour Firefoxe , qu'y a t-il ?
Le display:table-cell ; qui a le defaut d'etre compressible; ou le
display:table-caption; qui lui ne se trouveras pas comprimé , a preferé
donc au code mis plus haut.

Le span est nescessaire pour mettre firefoxe dans le coup Smiley smile .


Pour les marges autour des elements , j'avoue ne pas m'y etre interessé
, mais si tu as la curiosite de mettre une bordures aux li , tu vas etre
surpris de l'espace qu'elles occupent.

En partant du principe que ce sont des element passé en inline ; il pourrait
etre alors possible de rattrapper cette marge base en remettant tout le
monde en vertical-align: autre chose que baseline , "middle" par
exemple.... mais la on atteint les limites ou ça peut commencer a bugger
d'un nav a l'autre.


Pour les marges laterales , ben oui comme pour IE , il faut accoler la balise
li fermante a la prochaine balise li ouvrante , je ne voit pas de solution css.

Peut-etre y a t-il d'autres solutions , en partant sur une autre technique ou
theorie , a part evité les blocks , je voit pas non plu.


++
Modifié par gcyrillus (28 Nov 2006 - 19:41)
Merci pour ta réponse et ton explication, mpop.

Je suis d'accord avec toi sur le fait que cette solution est un peu du bricolage. Ceci dit, si elle est bien utilisée, pourquoi ne serait-elle pas compatible avec les futurs navigateurs, qui, espérons-le, interprèteront correctement "display: inline-block;" ? Dès lors, et à condition bien sûr que les rustines pour IE et Firefox fontionnent, quel est le problème ?

Et puis cette solution répond à un véritable besoin, qui est assez fréquent me semble-t-il (en particulier pour les menus horizontaux que l'on veut centrer).
Modifié par Eldebaran (28 Nov 2006 - 19:44)
Merci aussi pour ton second message, gcyrillus. Je t'avoue que je ne l'ai pour l'instant pas lu en entier, mais je vais faire un effort. Smiley cligne
Modérateur
Bonsoir,

ce n'est pas si compliqué que cela :

1) je garde mes <li >en display:inline; pour pouvoir les centrés .

le inline-block etant incompatible avec firefoxe je descend donc dans l'arborescence (la crée donc dans ton cas) , de façon a avoir une base qui va bien reagir au text-align:center; et esperer trouver une soluce pour firefoxe (notez qu'en generale cette demarche est faite pour IE )

1.1) il est donc impossible d'utiliser un element block ou qui recoit se comportement par le biais du css dans ces <li> sans perdre l'avantage du centrage même si c'est valide .



2) je me repporte donc sur la regles css display:inline-block; . Conformement au w3c elle me permet de dimensionné un element sans qu'il est le comportement d'un element de type "block".

Tiens justement , cette regles css dans IE sur un element de type inline confere exactement le même comportement , puis au cas où internet explorer se conforme au w3c pour cette regle , on n'y verra que du feu.

je met les elements dans mes <li> , je dimensionnent et je teste , ça marche . Okay.

(tiens je m'aperçoit une fois de plus et comprends pourquoi ça peut-etre etre bancale , on ne peut utiliser les <li> dans ce cas pour stylisé les bordures ou le fond , elles "encadrent" plutot mal leur descendants (courant dans IE) ,
<hors sujets ir..> lol , petit voyou les enfants de <li> , on va les gardées dans les <ul> ! </hs>.
Ces comportements ne sont pas les seuls que l'ont peut rencontrer dans une page web , et avec d'autres balises ou dautres regles css on peut avoir de drole de surprise (IE ayant la "palme d'or "dans cette categorie), ... que celui a qui ce n'est jamais arrivé me jette le premier "pc".... Smiley decu ( comportements ... inatendus ? , oui aux debuts , lorsque l'on a pas eu l'occasions de les observé , de les remarqués et de s'en rappeler ).

3) Firefoxe maintenant ! ... comme dit dans mon post precedent , y'a pas trop d'options , et la seule utilisable (dans ce cas ) c'est le display:table-caption; qui colle au plus prés au comportemnt attendu (element pas tout a fait block , car dependant de son conteneur ,le veritable element pose parfois aussi de petit soucis dans de vrais tableau dans firefoxe)

Le fait que l'element ainsi "afficher" soit seul dans son conteneur (ou du moins seul dans son parent direct a recevoir cette régle css , il n'y a aucun probleme a le tenter , en plus ça marche ! (firefoxe , a l'encontre d'opera par exemple, arrive a se sortir assez bien d'une des regles display:table et Cie ; en dehors de son contexte prevu) et comme ff est le seul concerné , on s'en sort trés bien. Smiley sweatdrop


Que reste t-il dans le html , ?
une balise neutre supplementaire , hmmm en cherchant bien on peut même trouver la balise collant semantiquement au contenu afficher dans le <li>.

Et dans le css ?

display:table-caption;
display:inline-block;

Hmmm ? ou est la bidouille ? , pas de commentaires conditionnels , pas de selecteurs "taxable d'hasardeux au gré des mise a jours " , ... juste une regle css qui se doit d'etre la regle conforme a utilisé dans ce cas .

Alors quel risque ?

Aucun , au mieux IE et firefoxe implementeront "conformement le display:inline-block; et la ligne precedente n'aura plus que comme raison d'etre d'assurer une compatibilité ascendante avec des "versions devenus obsoletes de firefoxe" ...


Attention a ne pas taxer de "bidouilles" un trucs que l'on ne comprends pas "bien" ou qui n'a pas deja 3000 liens en reference depuis 10ans sur le net pour en decrire le fonctionnement ... Le net c'est comme le reste , la position:static; est pour les passifs Smiley smile , non non , ça bouge et ce qui hier n'etait pas envisageable l'est aujourd'hui et sera depassé demain , rien de neuf sur ce point de vue .

D'ailleurs , dans ce cas precis , ou se trouve la bidouille ? pour IE , opera (et les autres) ou pour Firefoxe .... , Faudrait-il par ailleurs jeter les commentaires conditionnels , parceque ce serait bidouiller pour IE ?

Si ceci est taxée de bidouilles , d'accord , mais argumentez ! , ce n'est pas ma faute si les regles CSS sont encore plus du cote de la theorie que de ce qui est "faisable " en pratique.

La mise en forme n'est pas une affaire de programmation qui demande rigueur et mise en application de regles precises , mais d'observation et d'adaptation au differents navigateurs . Je perçoit ça comme un "jeu de lego" et je me prend pas la tête avec , pourqoi ça marche pas , mais j'apprehende ça comme : tiens , marrant ce trucs , et ça fait quoi dans les autres ... ah ,bah tiens ! pourquoi est ce que ce comportement ne serait finalement pas anormale . On ne dompte pas un navigateur , on s'en accomode et on fait au plus simple le plus souvent pôssible et c'est pas un 10 ou 12 caracteres supllemntaires et neutre dans une page qui vont me " faire mal".

ça ressemble peut-etre a un coup de geule , mais ce n'en est pas un ... dites moi que j'ai ou que je n'ai pas tort , a coup d'exemples et d'anecdotes .

Je suis curieux Smiley smile

++
Modifié par gcyrillus (28 Nov 2006 - 22:13)
Merci gcyrillus.

Je ne connais pas assez le problème pour argumenter en faveur ou contre de ta solution. En tout cas, elle semble bien fonctionner, j'attends donc les commentaires de personnes qui ne sont pas d'accord. Smiley cligne
gcyrillus a écrit :
D'ailleurs , dans ce cas precis , ou se trouve la bidouille ? pour IE , opera (et les autres) ou pour Firefoxe .... , Faudrait-il par ailleurs jeter les commentaires conditionnels , parceque ce serait bidouiller pour IE ?

(au passage, je note : c'est Firefox, sans e à la fin).

Disons que je suis allé un peu vite pour parler de bidouille (terme que j'affectionne et que j'utilise un peu trop largement, ce qui ne manque pas de déclencher l'agacement de certains).

Sur la robustesse de la technique :
- J'ai quelques doutes sur la gestion de inline-block par IE, la couche de layout que l'on rajoute, et les effets secondaires possibles. J'ai vaguement souvenir d'avoir lu quelque chose là-dessus, mais il me semble que le support d'inline-block par IE est partiel/buggé. On obtiendra sans doute l'effet voulu pour des choses simples, mais pour les cas particuliers (un bloc avec image+légende en inline-block, ou tout autre cas avec plusieurs éléments à l'intérieur du conteneur en inline-block), ça risque de devenir casse-gueule. À voir aussi le comportement dans un contexte un peu « chargé », avec éléments positionnés ou flottants, positionnements relatifs qui trainent, etc.
- Pour Firefox, reste à voir si l'implémentation de inline-block à venir sera correcte... si Firefox 3 a une gestion catastrophique de inline-block, on se retrouve le bec de l'eau. Mais bon, on peut espérer que les gens de Mozilla/Gecko feront un minimum attention avant de valider une telle implémentation.

Sur la démarche en général :
- La technique utilisée est claire et repose sur la cascade CSS et le présence ou non d'une implémentation... fort bien. Mais avec le cas IE en prime (implémentation partielle/buggée), on se retrouve avec un troisième cas de figure, ce qui commence à faire beaucoup à gérer... Objection de principe sans doute déplacée, j'en conviens. Smiley biggrin
- La « bidouille » serait non pas dans la technique mais dans la démarche de ceux qui pourraient l'utiliser, hélas sans forcément en maitriser les détails, « parce que c'est sympa ». La technique proposée est sans doute simple au niveau du code, mais elle est « lourde » dans la mesure où on doit gérer trois types d'implémentations différents. Si mes soupçons sur des bugs éventuels, en particulier pour IE6, se confirment, il me semble raisonnable d'en rester aux techniques limités mais simples et facilement maitrisables, et de réserver cette technique aux quelques cas où c'est réellement utile/nécessaire. Si mes soupçons ne sont pas fondés, par contre... pourquoi pas.

Bon, je suis sans doute un peu parano. N'empêche que quand on voit les demandes de certains sur ce forum, on voit une tendance forte à la prise de tête et à la « maitrise du design », avec bien souvent comme conséquences :
- beaucoup de temps consommé pour un résultat peu conséquent... ou même parfois peu robuste ;
- une accessibilité réduite.

Par habitude (qui a dit « lassitude » ? Smiley rolleyes ), je suis donc un peu parano. Smiley confused
Modérateur
<edit>@mpop decidement je croise tes post sans les voir Smiley smile
Mea culpa , pour mon orthographe et style d'ecriture , je fis pourtant un effort et je desespere d'ecrire proprement et correctement un jour.
--
Il est vrai que le code proposé n'est qu'un "gabarit" en dehors de tout contexte réel . qui demande d'etre mis a l'epreuve . je suis assez confiant .
Par contre je n'ai aucun "recul" ou anlyses dans un contexte de "mise en production" , cela ne veut pas dire grand chose pour moi , je ne suis pas en mesure d'evaluer les coup de develloppement d'un site. Alors je ne propose peut-etre pas forcement les bonnes choses .

Le inline-block est supporte a partir de IE5.5 pour le layout , avant il n'y a pas grand chose je crois , height, width, float et absolute ? peut-etre ...

Le comportement du inline-block est peut-etre droutant dans IE , car il conserve le comportement de base de l'element ainsi "positionné". Les rendus sont alors differents pour un span ou div .
Le span conservera un comportement inline de base , le div lui demanderas a etre repasse d'abord en inline avant de recevoir a nouveau le inline-block (ou zoom:1;) pour avoir le comportement du span , c'est la que toutes les confusions peuvent apparaitre . tant qu'on manipule des elements inline , on ne perçoit que peut de difference entre IE et opera.


</edit>
@Eldebaran.
de rien Smiley smile , c'est le role du forum aprés tout et j'y trouve aussi mon compte d'une certaine maniere .

Je viens de jeter un oeil aux marges et j'en arrive a ta conclusion pour les marges laterales , pour les marges verticales un line-height:0 semble suffire .

a nouveau une page test :

<!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" xml:lang="fr" lang="fr">
<head><title>XHTML 1.0 Strict</title>
<style type='text/css'>
/* css minimlisé */
body , html {
	height:100%;	/* pour IE 
			pour ne pas tronquer le dernier pixel et afficher 
			la bordure base de la derniere ligne de span 
			(dans cette page test) ce qui depasse de body 
			n'est pas afficher , deja vu 
			*/
}

li span {
	width:200px;
	border:1px solid;
	padding:1em 0;		/* simili  centrage 1 ligne */
	display:table-caption;	/* alternative firefoxe */
	display:inline-block;	/* IE active le haslayout et rejoint le comportement standard */
	line-height:1em;	/* pour ne pas heriter de ul */
	
}

li {
	display:inline;
}
ul {
	margin:0;
	padding:0;
	line-height:0px;	/* efface l'espace verticale dans firefoxe et les autres */
	text-align:center;
}
</style>
</head>
<body>
<h1>test sur une liste en centrage horizontale , fluide  avec contenu d'item dimensionnés sans marges </h1> 
<ul><li><span>Item spanné !</span></li><li><span>Item spanné !</span></li><li><span>Item spanné !</span></li><li><span>Item spanné 

!</span></li><li><span>Item spanné !</span></li><li><span>Item spanné !</span></li><li><span>Item spanné !</span></li><li><span>Item 

spanné !</span></li></ul>
<p>Afin d'eviter les marges laterales l'ensemble du codes html de la liste ne doit pas etre indenté ! </p>
<p>Pour les marges verticales , mettre un line-height a zero pour le conteneur  recalller a 1em sur la balise enfant recevant le texte a afficher .</p>
</body>
</html>


++


oui oui , des arguments pour et contre Smiley smile
Modifié par gcyrillus (29 Nov 2006 - 00:42)
Merci beaucoup à tous les deux, une fois de plus.

Je comprends parfaitement tes craintes, mpop. Ceci dit, j'espère avoir assez de recul sur le développement Web pour savoir m'arrêter là où il faut. En l'occurrence, je pense que je vais adopter cette technique tant que je n'ai pas besoin de faire des choses compliquées avec les blocs placés en inline-block, et tant que je ne rencontre pas de problème de compatibilité.

Je vais aussi me renseigner sur le support de inline-block par IE, ce qui ne sera pas du luxe...

Je considère donc ce sujet comme résolu.
Sujet clos
Aller à