[HTML] saut de ligne dans liste à puce.

Version imprimable

24/08/2005, 18h23
spirou

[HTML] saut de ligne dans liste à puce.

Bonjour à tous,

Une fois de plus encore un petit problème avec IE.
J'ai fait des listes à puce, dont certaines sont imbriquées.

Mon problème est relativement simple, je veux que les éléments de cette liste soient espacé d'une ligne vierge, j'ai donc inséré la balise <br> à chaque fin de ligne, ce qui fonctionne avec firefox, opéra, netscape, mais bien sûr le casse-bonbon de service ne se plie pas à la règle.

Y'a -t-il une autre façon de pouvoir insérer ce saut de ligne "compatible" avec International Emmerdeur ?

Merci.
24/08/2005, 18h30
ilood

Salut,

On peut voir le code que tu as utilisé ?
Pour espacer d'une ligne vierge j'aurai simplement utilisé <li> </li>

Salut Ilood,

J'avais déjà pensé a faire ce que tu m'as dis, sans l'avoir essayé, en effet cela fonctionne avec IE, mais il faut rajouter un paquet de lignes.

Voici un exemple de code que je fais :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<ul class="jardin">
  <li>Fruits</li><br>
    <ul class="nom">
      <li><a href="#">Pommes</a></li><br>
        <ul class="famille">
          <li><a href="#">Golden</a></li><br>
          <li><a href="#">Granny smith</a></li><br>
          <li><a href="#">Reinettes</a></li><br>
        </ul>
      <li><a href="#">Poires</a></li><br>
    </ul>
  <li>Légumes</li><br>
    <ul class="nom">
      <li><a href="#">Carottes</a></li><br>
      <li><a href="#">Navets</a></li<br>
      <li><a href="#">Haricots</a></li><br>
      <li><a href="#">Choux</a></li><br>
    </ul>
</ul>

Mais si il n'y a pas d'autre soluce que de rajouter une ligne avec un espace insécable, alors je vais y être contraint.

24/08/2005, 19h19
backus

A mon avis avec un bon CSS et des margin le tout doit être faisable sans rajouter de lignes avec espace insécable...
Tu regroupes les <li> à espacer dans une classe et dans le CSS :
.classe{
margin: xxpx;
}

(ou margin-top seulement...)

Petit apparté...

Ce n'est pas de cette manière que l'on imbrique les listes. L'imbrication se fait comme ceci (dixit le validateur w3c):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <ul> <li>Fruits <ul> <li>Pommes <ul> <li>Golden</li> <li>Granny Smith</li> </ul> </li> <li>Poires <ul> <li>Variétés de poires...</li> </ul> </li> </ul> </li> <li>Legumes <ul> <li>Carottes</li> <li>Navets</li> <li>...</li> </ul> </li> </ul>
Et en effet avec un selecteur subtilement choisi tu pourras définir un margin-bottom et margin-top pour effectuer un espacement correct.

24/08/2005, 19h49
spirou

Pour la mise en forme des listes, je ne savais qu'il fallait procéder de cette façon, j'en prends note.

Par contre, je viens d'essayer en incluant des margin top & bottom à mes classes css, mais cela ne fonctionne pas.

J'ai donc ajouter au lieu des marges une hauteur de ligne supérieure à la taille des caractères et là, ça fonctionne impeccable.

Merci à vous deux :wink:

Une solution avec des margin.

Code:

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
<style type="text/css">
ul li { margin: 20px 0 }
</style>
</head>
<body>
<ul>
   <li>Fruits
      <ul>
         <li>Pommes
            <ul>
               <li>Golden</li>
               <li>Granny Smith</li>
            </ul>
         </li>
         <li>Poires
            <ul>
               <li>Varietes de poires...</li>
            </ul>
         </li>
      </ul>
   </li>
   <li>Legumes
      <ul>
         <li>Carottes</li>
         <li>Navets</li>
         <li>...</li>
      </ul>
   </li>
</ul>

Ou jouer avec des classes pour des positionnement spécifiques dans les différentes catégories...