Présentation dans des listes imbriquées

Version imprimable

27/09/2005, 17h00
Ghusse

Présentation dans des listes imbriquées
Bonjour,
J'aimerai en fait, dans des listes imbriquées, avoir une présentation comme celle-ci :
http://ghusse.free.fr/screenshot/firefox_piti.png
J'ai obtenu celle ci sous firefox, en imbriquant mal mes listes, et en soulignant les éléments <li>
La bonne imbrication étant :
Code:

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:

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
27/09/2005, 17h02
10-nice

Applique le style au ul ;)

<ul style="text-decoration:underline;">
27/09/2005, 17h25
Perceval

Citation:

Envoyé par 10-nice

Applique le style au ul ;)

<ul style="text-decoration:underline;">

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

Salut !

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

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

27/09/2005, 20h43
Ghusse

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.

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

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.

29/09/2005, 09h35
Ghusse

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.