Présentation dans des listes imbriquées

**Ghusse** · 27/09/2005, 17h00

Bonjour,
J'aimerai en fait, dans des listes imbriquées, avoir une présentation comme celle-ci :

J'ai obtenu celle ci sous firefox, en imbriquant mal mes listes, et en soulignant les éléments <li>
La bonne imbrication étant :

Code :

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

1
2
3
4
5
6
7
8
<ul>
    <li>gnagnagna<li>
    <li>gnagnagna2
          <ul>
              <li>element1</li>
          </ul>
    </li>
<ul>

Au lieu de :

Code :

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

1
2
3
4
5
6
7
<ul>
    <li>gnagnagna<li>
    <li>gnagnagna2</li>
          <ul>
              <li>element1</li>
          </ul>
<ul>

Je n'arrive pas à avoir l'effet de soulignement voulu, si je l'applique en CSS à <li>

Quelqu'un peut m'aider ?

Merci

**10-nice** · 27/09/2005, 17h02

Applique le style au ul

**Perceval** · 27/09/2005, 17h25

Envoyé par 10-nice

Applique le style au ul

Je ne suis pas sûr qu'en faisant ca, ca souligne le contenu des balises <li>

**spirou** · 27/09/2005, 18h28

Salut !

Je viens de m'essayer à faire ton style de liste, pour le réaliser, j'ai utiliser une balise span.

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title></title>
  <style type="text/css">
  body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  }
  #liste{
  width: 100%;
  margin: 0;
  list-style-type: none;
  background: #f0f0f0;
  color: blue;
  font-size: 20px;
  padding-left: 30px;
  }
  #liste li span{
  width: 100%;
  display: block;  /* pour firefox */
  }
  .titre{
  width: 100%;
  color: #00f;
  border-bottom: 2px solid #000;
  }
  .elements{
  width: 100%;
  color: #999999;
  list-style-type: none;
  font-size: 0.8em;
  padding: 10px 0;
  }
  .elements li{
  border-bottom: 1px solid #999999;
  }
  
  </style>
  </head>
  <body>
 
    <ul id="liste">
      <li><span class="titre">Liste 1</span>
        <ul class="elements">
          <li>element 1</li>
          <li>element 2</li>
          <li>element 3</li>
        </ul>
      </li>
      <li><span class="titre">Liste 2</span>
        <ul class="elements">
          <li>element 1</li>
          <li>element 2</li>
          <li>element 3</li>
        </ul>
      </li>
    </ul>
 
  </body>
</html>

Ca fonctionne avec IE et Mozilla.

**Ghusse** · 27/09/2005, 20h43

Merci, j'avais pensé au <span> aussi (même si je dois utiliser un div du fait de la présence d'éléments en bloc dans mon <li>).
J'espérais juste une solution qui ne me surcharge pas le code, déjà assez conséquent.

**fred777888999** · 28/09/2005, 10h48

Je n'ai pas compris ton probleme, tu peux (facilement) definir un style dans des niveaux imbriques, par ex :

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
 
<html>
<head>
<style>
ul li {
        text-decoration: underline;
}
ul li ul li {
        text-decoration: none;
}
</style>
</head>
<body>
<ul> 
    <li>gnagnagna</li> 
    <li>gnagnagna2
          <ul> 
              <li>element1</li> 
          </ul> 
	</li>
<ul>
</body>
</html>

qui souligne tous les premiers elements de premier niveau et pas de second, mais on pourrait facilement faire le contraire...
++
Fred.

**Ghusse** · 29/09/2005, 09h35

Pour faire ce que je veux, je n'ai pas d'autre choix que d'ajouter effectivement un span ou une div : ce n'est pas du soulignement de texte ...
Merci pour vos réponses.

Présentation dans des listes imbriquées

HTML

Discussions similaires

Partager

Partager