18041 sujets

Questions générales et questions de débutants

[Résolu] Liste ordonnée sur plusieurs colonnes

Voilà une question simple mais qui demande une solution compliquée car je n'arrive à rien depuis le temps que je passe à chercher.

J'aimerais faire ceci !

http://img709.imageshack.us/img709/7618/79674618.gif

Si on met des en display:inline, la liste sera du genre
1. 2. 3.
4. 5. 6.

Plutôt que
1. 4.
2. 5.
3. 6.

Avez-vous des solutions ou je dois me faire une liste normale et "hardcoder" mes chiffres ?
Modifié par Sorano (17 Feb 2010 - 13:56)
Salut,

et en attendant :
ol {
	width: 30px;
	float: left;
	margin: 0;
	padding: 25px;
}
<ol>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
</ol>
<ol start="6">
	<li>f</li>
	<li>g</li>
	<li>h</li>
	<li>i</li>
	<li>j</li>
</ol>
<ol start="11">
	<li>k</li>
	<li>l</li>
	<li>m</li>
	<li>n</li>
	<li>o</li>
</ol>
À noter que l'attribut start n'est pas autorisé en mode strict : il faut donc employer un doctype transitionnel si l'on veut que le code reste syntaxiquement valide.
<edit , reponse en telescopage avec celle de Patidou que je n'avais pas remarqué , désolé/>
bonsoir ,

il y a aussi une option via les styles pour les navigateurs les plus récents :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>HTML 4.01 </title><style type='text/css'>#test {counter-reset:headers;}
#test ol {float:left;list-style-type:none;}
#test ol li:before{counter-increment:headers;content: counter(headers, decimal)' - ';
counter-increment:headers;
color:green;font-weight:bold;
}</style><script type='text/javascript'></script></head><body>
<div id="test">
<ol><li>item</li><li>item</li><li>item</li></ol>
<ol><li>item</li><li>item</li><li>item</li></ol>
<ol><li>item</li><li>item</li><li>item</li></ol>
<ol><li>item</li><li>item</li><li>item</li></ol>
<ol><li>item</li><li>item</li><li>item</li></ol>
<ol><li>item</li><li>item</li><li>item</li></ol>
</div></body></html>


Le plus sur est de s'appuyer sur un script coté serveur , je pense Smiley smile

GC
Modifié par gc-nomade (16 Feb 2010 - 20:37)
Patidou a écrit :
Apparemment, il y a moyen de numéroter en css, faut voir comment c'est supporté dans les navigateurs.
Le problème de cette solution est celui plus général du content CSS. Autant il n'est pas gênant lorsqu'il ne s'agit que de présentation, autant il est potentiellement problématique lorsqu'il s'agit d'ajouter du contenu (la question étant de savoir si les numéros d'une liste ordonnée sont ou non de la présentation). Il me semble que Quentin en tout cas préconisait le start.
C'est juste, le contenu généré c'est pas terrible pour l'accessibilité. Je viens de voir qu'en html5 start est intégré.
a écrit :
Le problème de cette solution est celui plus général du content CSS. Autant il n'est pas gênant lorsqu'il ne s'agit que de présentation, autant il est potentiellement problématique lorsqu'il s'agit d'ajouter du contenu (la question étant de savoir si les numéros d'une liste ordonnée sont ou non de la présentation). Il me semble que Quentin en tout cas préconisait le start.

Je confirme. Donc il faut choisir entre CSS3 ou plusieurs listes successives.

Le problème dans ce cas précis avec les compteurs CSS c'est que pour un lecteur d'écran, la numérotation recommencera à 1 à chaque nouvelle liste. C'est pas terrible, et on ne peut l'éviter que si on utilise start.

D'une manière plus générale à propos des compteurs CSS, j'ai du mal à voir dans quels cas une numérotation ne peut être que cosmétique. Je suis d'avis qu'une numérotation apporte toujours une information utile et n'est donc jamais que purement présentation. Si quelqu'un a un contre-exemple évident à me montrer... même réflexion pour list-style-type dans le cas des listes ordonnées.

Utiliser plusieurs listes à la suite est sémantiquement parlant une erreur en soi, mais pour le moment il n'y a pas d'alternative. Alors on fait avec.... ou pas.
J'ai finalement trouvé un petit tutoriel qui fonctionne bien partout et qui donne le rendu désiré.

http://www.communitymx.com/content/article.cfm?page=3&cid=27F87

Voici le résultat final 


<ol>
  <li class="col1"><a href="#">Antelope</a></li>
  <li class="col1"><a href="#">Baboon</a></li>
  <li class="col1"><a href="#">Bison</a></li>
  <li class="col1"><a href="#">Camel</a></li>
  <li class="col1"><a href="#">Chimpanzee</a></li>
  <li class="col2 coltopper"><a href="#">Deer</a></li>
  <li class="col2"><a href="#">Eland</a></li>
  <li class="col2"><a href="#">Elk</a></li>
  <li class="col2"><a href="#">Gazelle</a></li>
  <li class="col2"><a href="#">Gibbon</a></li>
  <li class="col3 coltopper"><a href="#">Kangaroo</a></li>
  <li class="col3"><a href="#">Meerkat</a></li>
  <li class="col3"><a href="#">Sheep</a></li>
  <li class="col3"><a href="#">Warthog</a></li>
  <li class="col3"><a href="#">Zebra</a></li>
</ol> 




ol {
  margin: 0;
  padding: 0;
}
 
li {
  margin: 0;
  padding: 0;
  line-height: 1.3em;
}
 
.col1 {margin-left: 3em;}
 
.col2 {margin-left: 13em;}
 
.col3 {margin-left: 23em;}
 
.coltopper {margin-top: -6.5em;} 

a {
  display: block;
  width: 7.8em;
  color: #036;
  position: relative; /* for IE-Win */
}
a:hover, a:focus { background:blue; color:#fff; }


C'est sur que c'est pas optimal niveau CSS mais ça fait bien le boulot et ça reste une liste correctement ordonnée je vais mettre résolu mais si vous avez des commentaires sur cette techniques, je serais curieux de les savoir.
Sujet clos
Aller à