[HTML] saut de ligne dans liste à puce.

**spirou** · 24/08/2005, 18h23

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.

**ilood** · 24/08/2005, 18h30

Salut,

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

**spirou** · 24/08/2005, 19h07

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 :

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
 
<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.

**backus** · 24/08/2005, 19h19

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...)

**ilood** · 24/08/2005, 19h29

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 :

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
<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.

**spirou** · 24/08/2005, 19h49

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

**ilood** · 24/08/2005, 20h07

Une solution avec des margin.

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
<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...

[HTML] saut de ligne dans liste à puce.

HTML

Discussions similaires

Partager

Partager