[CSS] Probléme d'alignement de Puces

[Tizel]

Bonsoir,

Voici un petit probléme soumis à votre sagacité. Voilà, je souhaite mettre une liste de puce dans le milieu de ma page mais que celles ci restent alignées les unes par rapport aux autres.

J'y arrive bien en mettant ma liste de puces dans un tableau et en centrant le tableau, mais je n'y arrive pas autrement.

Je joint à ce Post une page HTML "test"... Si quelqu'un a une idée, je le remercie grandement.

Tizel

test.html

[Monique]

Bonjour Tizel,

Tu dois placer ta liste dans un bloc, et c'est celui-ci qui doit être centré.

Comme cet exemple sur Openweb :

.conteneur {
  text-align: center;
}
.centre {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  text-align: left;
}

et tu places ta liste dans le bloc .centre

[Tizel]

Merci Monique,

Mais ça ne marche pas tellement mieux malheureusement.

Ce qui donne l'illusion de centrage dans l'exemple que tu me donne, c'est l'utilisation du width 70%. Hors, je ne peux savoir à l'avance si mon texte est court ou pas (je ne veux pas couper inutilement les lignes).

J'ai mis à jour mon fichier test.

Tizel

test.html

[Monique]

Regarde comme ceci, j'ai volontairement mis un fond bleu pour que tu vois que le bloc .centre est bien au centre...

la css

<style type="text/css">
.conteneur {
 text-align: center;
}
.centre {
 margin-left: auto;
 margin-right: auto;
 width: 70%;
 text-align: left;
 background-color: blue;
}
</style>

et le html

<div class="conteneur">
<div class="centre">
<ul>
<li>puce 1 : mot court
<li>puce 2 : mot plus long, voire trés long
<li>puce 3 : mot quelconque
</ul>
</div>
</div>

[Raphael]

Monique >

Tu ne fermes pas tes <li> ?

Pourquoi utiliser un div "centre" alors que <ul> remplirait très bien ce rôle ?

[Tizel]

Pour les LI, c'est ma faute Sibelius... Dans mes exemples, je ne les avais pas fermés.

Je ne pense d'ailleur pas qu'il soit nécessaire de les fermer dans le cas du HTML. Bon, faut dire que j'ai appris le HTML avec un bouquin de Microsoft Press, assez bien fait d'ailleur, mais qui ne doit pas toujours respecter scrupuleusement les normes en la matiére.

Pour le <ul>, c'est pareil, c'est ma faute. Quand je fais des essaie, j'essaye rarement d'optimiser mon code... Mea-culpa.

Pour ce qui est de mon probléme, ce n'est pas encore ça malheureusement. J'ai repris ton exemple Monique, et tu peut constater que ce que tu me propose n'est pas encore ce que je souhaite obtenir (mais on progresse).

Certes, le bloc est centré, mais je ne sais pas comment adapter sa taille à la taille du texte. J'ai essayé de mettre "width: auto;" mais ça ne marche pas

Tizel

test.html

[Monique]

Monique >

Tu ne fermes pas tes <li> ? 

Pourquoi utiliser un div "centre" alors que <ul> remplirait très bien ce rôle ?

Bonjour Sibelius,

Si je les ferme.. mais j'ai collé le bout de code sans y faire attention

Le div centre... j'avais fait un essai sans plus de succès en le supprimant.

Bilan : je n'ai toujours pas la solution pour Tizel.

Tizel, les balises p et li peuvent ne pas être fermées en HTML 4 transitional.

Elles doivent l'être en strict et en XHTML.

J'avais pris l'habitude de les fermer même en transional, je trouvais le code plus clair et plus facile à relire.

[Anonymus]

Pour ce qui est de mon probléme, ce n'est pas encore ça malheureusement. J'ai repris ton exemple Monique, et tu peut constater que ce que tu me propose n'est pas encore ce que je souhaite obtenir (mais on progresse).

Certes, le bloc est centré, mais je ne sais pas comment adapter sa taille à la taille du texte. J'ai essayé de mettre "width: auto;" mais ça ne marche pas

Tizel

Pour adapter la taille de la cellule à la taille du texte, tu devrais utiliser le php.

La fonction strlen permet de connaitre la longueur de la chaine. Ainsi, un code tel que celui ci devrait te satisfaire :

<?
$array[]="mot court ";
$array[]="mot plus long, voire trés long plus long que ca ?";
$array[]="mot plus long, voire trés long ";
$array[]="mot quelconque";

$width=0;
foreach($array as $value){

	if (strlen($value)>$width)$width=strlen($value);

	}
echo $width;

?>

A+, Anonymus.

[Raphael]

Humm, et avec un display inline sur les objets, ça devrait aller non ?

[Raphael]

Un petit test en utilisant des listes de définitions, si ça peut vous aider à avencer :

<?xml version="1.0"?>
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--

.centre {
margin: 0 auto 0 auto;
text-align: left;
background-color: blue;
}
dl, dd {
display: inline;
}
dd {margin:0}
-->
</style>
</head>
<body>

<dl class="centre">
<dd>puce 1 : mot court</dd><br />
<dd>puce 2 : mot plus long, voire trés long</dd><br />
<dd>puce 3 : mot quelconque</dd><br />
</dl>

</body>
</html>

Modifié 6 Avril 2004 par Sibelius