28173 sujets

CSS et mise en forme, CSS3

[resolu] Centrer les éléments d'une liste de blocs

Bonjour à tous,

J'essaye de centrer les éléments d'une liste affichant des blocs de taille définie les uns à coté des autres. Mais comme une image vaut mieux qu'un long discours, voici de que je voudrais faire:
upload/12182-liste2.gif

actuellement, le code de ma page est celui-ci:

<head>
<title>test liste centrée</title>
<style type="text/css">
<!--
body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#boxe {
	width: 400px;
	margin: 50px auto;
}
#boxe h1 {
	background-color: #FF9900;
	height: 38px;
	text-align: center;
	margin: 0px;
	color: #FFFFFF;
	font-size: 1.4em;
}
#boxe ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#boxe li {
	height: 100px;
	width: 90px;
	text-align: center;
	border: 1px solid #FF9900;
	padding: 5px;
	float: left;
}
#boxe a {
	display: block;
	height: 100%;
	color: #000000;
	text-decoration: none;
}
#boxe a:hover {
	color: #FFFFFF;
	background-color: #FF9900;
}
-->
</style>
</head>

<body>
<div id="boxe">
  <h1>liste</h1>
  <ul>
    <li><a href="#">lien1</a></li>
    <li><a href="#">lien2</a></li>
    <li><a href="#">lien3</a> </li>
  </ul>
</div>
</body>
</html>

Ce qui me donne bien sûr avec le float ceci:
upload/12182-liste1.gif

Quelqu'un aurait-il une idée pour centrer cette liste?? l'équivalent d'un float:center!!!

Merci d'avance pour vos idées
Modifié par xaglo (17 May 2007 - 10:19)
xaglo a écrit :
Quelqu'un aurait-il une idée pour centrer cette liste?? l'équivalent d'un float:center!!!
hm… display:inline ? Smiley ravi
Bonsoir,

Un text-align:center sur "UL" pourrait faire l'affaire ?

Edit : non en fait, à cause des float:left, désolé.
Modifié par Philos (17 May 2007 - 00:59)
non, en effet, j'ai aussi appliqué le text-align, le margin:0 auto, testé pas mal de choses, j'arrive à centrer facilement les blocs les uns sous les autres mais pas les uns à coté des autres
Oui, le float-left impose ce phénomène. Et comme les "a" sont display:block il n'est pas possible de passer en display:inline sur les "li".

Pas d'autres idées pour t'aider, mes encore trop maigres connaissances atteignent leurs limites.
xaglo a écrit :
j'ai testé mais sans trouver de code fonctionnel Smiley confused
Allez, encore un ptit effort? Smiley ravi
Base-toi sur quelque chose comme ceci:

ul {list-style:none; text-align:center;}
li {display:inline; padding:1em 25px;}
Il semble vouloir poser une largeur fixe et identique sur les "li", ce que tu proposes ne lui permettra pas de conserver cet état si les liens contenus dans les "li" sont des textes de largeurs différentes.

Et si je ne commets pas d'erreur (pas certain ça), je dirai que :

. soit on veut garder une largeur fixe sur les "li" et on ne peut pas les display:inline. Ce qui annule la possibilité de centrer UL.
. soit on veut centrer la liste et il faut display:inline les "li" mais on perd la largeur fixe des "li".

La seule solution pour centrer reste le text-align:center sur "ul" avec des padding sur le "a" mais les blocs ne seront pas de largeur fixe.

Vrai ?
Modifié par Philos (17 May 2007 - 01:31)
merci à tous les deux pour vos conseils...

Non benjamin, désolé, ton code ne me permet que d'avoir des blocs les uns en dessous des autres, pas moyen de les mettre cote à cote

Je vais finir par revenir à une bonne vielle table des familles Smiley cligne
En théorie, ce genre de chose se ferait probablement avec la propriété display: inline-block, malheureusement mal supportée par IE et pas du tout supportée par Firefox.

En partant du postulat que les blocs sont de largeur fixe :

- si tu connais à l'avance la largeur d'un bloc et le nombre de blocs à afficher, tu peux grouper tous les blocs dans un conteneur de largeur définie, et centrer ce conteneur via la technique des marges automatiques ;
- si le nombre de blocs n'est pas connu mais qu'ils sont censés tenir sur une même ligne, la solution sera effectivement, en l'absence d'un support correct de display: inline-block par les navigateurs, de passer par un tableau.
oui, ok, une liste de liens textuels, pas de problème pour les centrer, c'est d'ailleurs comme ça que je gère la liste de liens de mon footer.

Ma difficulté est d'essayer de centrer des blocs de largeur fixe et pour corser la chose, cette liste de lien est générée en php et peu faire 1 ou plusieurs liens.
sorry florent, j'ai posté ma réponse sans voir la tienne.

En effet mes listes de liens ne sont pas connues mais les largeur de blocs, oui, et la largeur du conteneur aussi. Je gère d'ailleurs certaines de mes boxes en tableau, quand elle font une à trois colonnes sur une seule ligne et d'autres en float: left quand elles font plus d'une ligne.

Je vais donc rester avec cette solution... Dommage
Salut,

Partant de cette possibilité que présente Florent :
a écrit :

- si tu connais à l'avance la largeur d'un bloc et le nombre de blocs à afficher, tu peux grouper tous les blocs dans un conteneur de largeur définie, et centrer ce conteneur via la technique des marges automatiques ;


Tu pourrais envisager une petite couche de javascript pour compter le nombre de liens. Cela ne devrait pas poser de souci puisque cela ne concerne que la présentation.

Bon cela dit un tableau c'est pas grave, grave non plus, même si un tableau sans entrées ... Bof.

<edit>

Peut être que tu peux utiliser php aussi, quelque chose comme :

<?php
$nombre_liens = /* ben là tu te débrouilles [smile] */;
$largeur_ul = ceil($nombre_liens*150); // j'ai mis une valeur pour l'exemple
?>
<ul style="width:<?php echo $largeur_ul; ?>px;">
...
</ul>

</edit>
Modifié par Christian Le Bouler (17 May 2007 - 09:21)
oui Chritian, tes solutions fonctionnent. Le défaut est que je met alors ma mise en forme dans le contenu ou alors je crées des fonctions pour donner la possibilité de définir en externe les données comme la largeur du bloc <li>

je crois que je vais rester pour l'instant avec ma solution de <table> en attendant que le w3c nous valide le float:center Smiley lol

merci et bravo à tous pour votre réactivité
xaglo a écrit :
Le défaut est que je met alors ma mise en forme dans le contenu


Ba ce n'est pas un défaut en soi, et il vaut mieux d'ailleurs ne pas être trop rigoriste contre les déclarations de style in tag, c'est prévu et c'est très pratique, la preuve.
De surcroit tu peux mettre tout ce qui concerne cette liste en css externe sauf la précision sur le width justement.
Modifié par Christian Le Bouler (17 May 2007 - 10:33)
Christian Le Bouler a écrit :
Ba ce n'est pas un défaut en soi, et il vaut mieux d'ailleurs ne pas être trop rigoriste contre les déclarations de style in tag
C'est clair, le mieux est l'ennemi du bien.

Néanmoins, n'étant pas encore expert en manipulation de css, j'essaye de m'astreindre à une certaine rigueur et aller au bout des principes de base avant de chercher des déviances Smiley cligne

pour ma question originelle, finalement la table à du bon, elle me permet de garder ma boxe à 100% et les cellules de chaque ligne à 33% si il elle est pleine (plus de 3 cellules avec 3 par ligne) 50% si il n'y en a que 2 et 100% si il n'y en a qu'une!!! Je n'arriverai définitivement pas à ce résultat avec mes capacités en CSS.

tant pis pour la rigueur "full tableless" Smiley biggrin
Sujet clos
Aller à