[ul/li] Séparer une liste sur plusieurs colonnes

**Wookai** · 22/06/2007, 10h18

Bonjour à tous !

J'ai une grande liste, à plusieurs niveaux (en moyenne trois), que j'aimerais séparer sur plusieurs colonnes. La séparation se fera dynamiquement (par exemple 20 éléments par colonne), ce qui veut dire qu'il peut arriver que la couper se fasse au milieu d'une liste de 3ème niveau.

Le problème, c'est que lorsque je reprends la liste dans ma 2ème colonnes, je dois recréer la hiérarchie, et j'obtiens deux bullets vide avant mon élément sous firefox, et deux retours à la ligne sous IE (voir http://20-100.ch/test.html).

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div style="float: left; width: 300px; border: 1px solid black; padding: 5px; margin: 10px;">
   <ul>
      <li>Catégorie 1
         <ul>
            <li>Sous catégorie 1
               <ul>
                  <li>Sous sous catégorie 1</li>
                  <li>Sous sous catégorie 2</li>
               </ul>
            </li>
            <li>Sous catégorie 2
               <ul>
                  <li>Sous sous catégorie 3</li>
                  <li>Sous sous catégorie 4</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>
<div style="float: left; width: 300px; border: 1px solid black; padding: 5px; margin: 10px;">
   <ul>
      <li>
         <ul>
            <li>
               <ul>
                  <li>Sous sous catégorie 5</li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>

Y a-t-il un moyen d'obtenir le rendu voulu, c'est-à-dire une continuité des deux listes ?

**chaminette** · 22/06/2007, 11h03

J'ai une solution un peu barbare :
Tu crées dans ta CSS des classes pour <ul> et <li> .
Dans ces classes tu fais en sorte que les puces soient supprimées ... je crois que c possible (a chercher).
Donc une fois que tu changes de colonne et que tu ne veux pas qu'on voie les petites puces en plus, tu utilises ces classes la !
ça ne résoud pas vraiment le problème, mais ça le contourne !

**Wookai** · 22/06/2007, 11h06

J'y ai pensé, et je garde cette solution comme dernier recours. Mais une solution un peu propre me satisferait plus

!

Merci quand même pour ta réponse

! Je vais encore attendre un peu, voir si quelqu'un a une meilleure solution !

**blueice** · 22/06/2007, 13h29

Ici
et
ici avec du JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {background:#fff;}
ul {white-space:nowrap;}
table {width:80%;margin:0 auto;}
td {border:1px dotted #666;}
</style>
<script type="text/javascript">
<!--
function TJK_moveNodes(sourceNode,targetNode,newWrapperTagName){// v1.0 Copyright (c) 2006 TJKDesign - Thierry Koblentz
  if (!document.createElement) return;
  var nodeRecipient=(targetNode)?targetNode:document.createElement(newWrapperTagName);
  while(sourceNode.childNodes.length)nodeRecipient.appendChild(sourceNode.childNodes[0]);    
  if(newWrapperTagName)sourceNode.appendChild(nodeRecipient);
}
function TJK_listINTOcolumns(cols){// v1.0 Copyright (c) 2006 TJKDesign - Thierry Koblentz
if (!document.getElementById || !document.createElement) return;
    var z_Doc = document.getElementsByTagName("body")[0];
    var z_OL = document.getElementsByTagName("ol")[0];
    var z_Caption = document.createElement('caption');    
    var z_LI = z_OL.getElementsByTagName("li");
    var z_Table = document.createElement('table');
    var z_Tbody = document.createElement('tbody');    
    var z_Row;
    var z_Cell;
    var z_Text;    
    var number;
    var loop = Math.round(eval(z_LI.length/cols)-.5) ; // LIs divided by Columns with rounding stuff
    var z;    
    for (var x=0;x<loop;x++){
        z=x;
        z_Row = document.createElement('tr');
 
        for (var i=0;i<cols;i++){
            z_Cell = document.createElement('td');
            number = (z<9) ? "0"+eval(z+1)+"." : eval(z+1)+".";
            z_Text = document.createTextNode(number);
            z_Cell.appendChild(z_Text);                        
            TJK_moveNodes(z_LI[z],z_Cell,'');
            z_Row.appendChild(z_Cell);
 
            if(eval(z+loop)<z_LI.length) z+=loop;
        }
        z_Tbody.appendChild(z_Row);
    }
    z_Table.appendChild(z_Tbody);
    z_Doc.insertBefore(z_Table,document.getElementsByTagName("p")[0]);
    z_Doc.insertBefore(z_Table,z_OL);
    z_Doc.removeChild(z_OL);
}
//-->
</script>
</head>
<body onload="TJK_listINTOcolumns(3);">
<h1>Look Ma, no hook, no wrapper, nada!</h1>
<ol>
<li><a href="#">Aloe</a></li>
<li><a href="#">Bergamot</a></li>
<li><a href="#">Calendula</a></li>
<li><a href="#">Damiana</a></li>
<li><a href="#">Elderflower</a></li>
<li><a href="#">Feverfew</a></li>
<li><a href="#">Ginger</a></li>
<li><a href="#">Hops</a></li>
<li><a href="#">Iris</a></li>
<li><a href="#">Juniper</a></li>
<li><a href="#">Kava kava</a></li>
<li><a href="#">Lavender</a></li>
<li><a href="#">Marjoram</a></li>
<li><a href="#">Nutmeg</a></li>
<li><a href="#">Oregano</a></li>
</ol>
<p>Markup below:</p>
<pre>&lt;ol&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Aloe&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Bergamot&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Calendula&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Damiana&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Elderflower&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Feverfew&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Ginger&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Hops&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Iris&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Juniper&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Kava kava&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lavender&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Marjoram&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Nutmeg&lt;/a&gt;&lt;/li&gt;<br />&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Oregano&lt;/a&gt;&lt;/li&gt;<br />&lt;/ol&gt;</pre>
</body>
</html>

**Wookai** · 22/06/2007, 14h01

Hello !

Merci pour le lien, c'est intéressant ! La dernière solution est la plus satisfaisante, mais pas encore parfaite

. Vu que la liste des dynamique, il faut que je génère la liste plus le css. Ce n'est pas ce qu'il y a de plus efficace

! Mais c'est pour l'instant la solution que je garde.

Quant à ton exemple, il fonctionne bien, mais c'est de la triche

! En effet, il transforme la liste en tableau ! De plus, pour une liste non-ordonnée comme j'utilise, il faudrait encore un peu de travail pour reproduire l'indentation des différents niveaux

!

Merci pour la réponse, en tous cas !

[ul/li] Séparer une liste sur plusieurs colonnes

HTML

Vue hybride

Discussions similaires

Partager

Partager