Discussion :

[Loceka]

Bonjour,

Je voudrais faire un affichage ressemblant à ceci, en utilisant des listes (<ul><li>...) :


Voilà mon code HTML actuel :

Code HTML :

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
<ul>
  <li>
    <div class="entete">I</div>
    <ul>
      <li>
        <div class="entete">I.1</div>
        <ul class="contenu">
          <li>valeur I.1.a</li>
          <li>valeur I.1.b</li>
        </ul>
      </li>
      <li>
        <div class="entete">I.2</div>
        <ul class="contenu">
          <li>valeur I.1.a</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <div class="entete">II</div>
    <ul class="contenu">
      <li>valeur II.1</li>
    </ul>
  </li>
</ul>

J'ai essayé avec des floats :

Code CSS :

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

1
2
3
4
5
6
7
8
.entete {
  float : left;
  height : 100%;
  width : 80px;
}
.contenu {
  float : left;
}

seulement ça fait n'importe quoi :
- les <li> sont aussi en float et non pas un par ligne
- les div "entete" ne prennent pas toute la hauteur du ul "contenu" associé.

Si vous avez des idées ou si vous avez déjà fait des choses similaires, je suis preneur !

Merci d'avance,
Loceka.

[Bisûnûrs]

- les <li> sont aussi en float et non pas un par ligne

Lesquels ? J'ai essayé avec le code que tu as donné (et juste ce code) et les li vont bien à la ligne.

- les div "entete" ne prennent pas toute la hauteur du ul "contenu" associé

Hop :
http://css.developpez.com/faq/?page=...ur_pourcentage

[Loceka]

Merci bien pour ta réponse, en réalité j'ai laissé tomber et je suis passé par des tableaux, c'est peut-être plus archaïque mais tellement plus simple à gérer...

[Bisûnûrs]

Argh !