Discussion :

[laurentSc]

Bonsoir,

j'ai un besoin qui doit être très simple, mais comme je suis nul en CSS, j'y arrive pas.

Voici ce que je voudrais obtenir :

lev0----- lev0
-- lev1----- lev1
---- lev2----- lev2
---- lev2----- lev2
---- lev2----- lev2
---- lev2----- lev2
-- lev1----- lev1
-- lev1----- lev1
---- lev2----- lev2
---- lev2----- lev2

et voici ce que j'obtiens :

lev0
-- lev1
------ lev2 lev2 lev2 lev2
-- lev1 lev1
------ lev2 lev2
lev0
-- lev1
------ lev2 lev2 lev2 lev2
-- lev1 lev1
------ lev2 lev2

on est loin du compte !
et voici mon code :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
    <ul id="line0"> 
        <li> <span>lev0</span>
              <ul>
                    <li class="lev1">lev1</li>
                    <li class="lev1">
                        <ul>
                              <li class="lev2">lev2</li>
                              <li class="lev2">lev2</li>
                              <li class="lev2">lev2</li>
                              <li class="lev2">lev2</li>
                        </ul>
                    </li>  
                    <li class="lev1">lev1</li>
                    <li class="lev1">lev1</li>
                    <li class="lev1">
                          <ul>
                              <li class="lev2">lev2</li>
                              <li class="lev2">lev2</li>
                          </ul>
                    </li>
              </ul>
          </li>
 
          <li> <span>lev0</span>
             <ul>
                    <li class="lev1">lev1</li>
                    <li class="lev1">
                        <ul>
                              <li class="lev2">lev2</li>
                              <li class="lev2">lev2</li>
                              <li class="lev2">lev2</li>
                              <li class="lev2">lev2</li>
                        </ul>
                    </li>  
                    <li class="lev1">lev1</li>
                    <li class="lev1">lev1</li>
                    <li class="lev1">
                          <ul>
                              <li class="lev2">lev2</li>
                              <li class="lev2">lev2</li>
                          </ul>
                    </li>
              </ul>
          </li>
    </ul>

Code css :

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

1
2
3
4
      #line0 li {display:inline;}
      .lev1 {font-size:50px;}
      .lev2 {font-size5px;
      margin-left:50px;}

[Muchos]

Voici ce que je voudrais obtenir :

Je ne comprends pas. Pourquoi les niveaux ("lev") sont doublés, et pourquoi tout est aligné verticalement alors que vous voulez horizontalement (même si vous parlez de "centrer")?

[rodolphebrd]

Un petit lifting du code HTML :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<ul>
  <li>lev0
    <ul>
      <li>lev1
        <ul>
          <li>lev2</li>
          <li>lev2</li>
          <li>lev2</li>
          <li>lev2</li>
        </ul>
      </li>
      <li>lev1</li>
      <li>lev1
        <ul>
          <li>lev2</li>
          <li>lev2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>lev0 
    <ul>
      <li>lev1
        <ul>
          <li>lev2</li>
          <li>lev2</li>
          <li>lev2</li>
          <li>lev2</li>
        </ul>
      </li>
      <li>lev1</li>
      <li>lev1
        <ul>
          <li>lev2 </li>
          <li>lev2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Auquel on applique simplement ce code CSS :

Code :

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

1
2
3
4
5
6
li{
	list-style: none;
}
ul ul li, ul ul ul li{
        display:inline;
}

http://codepen.io/anon/pen/bzkhH

[laurentSc]

Les "+1", c'est pour recevoir des réponses...

un brin d'explication : d'abord, "centrer", je me suis trompé de mot ; je voulais dire "aligner".

Ensuite, si les "lev" sont doublés, c'est pour ne pas me fatiguer ; à terme les 2 colonnes (plus que 2 d'ailleurs) seront différentes, mais j'en suis encore au stade d'essai...(et si le niveau 0 est horizontal, les niveaux 1 et 2 sont verticaux)

pour rodolphebrd, merci pour le lifting, mais je n'obtiens pas vraiment ce que je souhaite, mais ça :

lev0
-- lev1
---- lev2
---- lev2
---- lev2
---- lev2
-- lev1
-- lev1
---- lev2
---- lev2
lev0
-- lev1
---- lev2
---- lev2
---- lev2
---- lev2
-- lev1
-- lev1
---- lev2
---- lev2

j'ai essayé de modifier un peu le css :

Code css :

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

1
2
3
4
5
6
7
li{
	list-style: none;
}
//ul ul li, ul ul ul li{
ul li{
        display:inline;
}

mais ça ne va pas...

[Bovino]

Code :

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

//ul ul li, ul ul ul li{

C'est quoi ça ? Renseigne-toi sur comment faire des commentaires en CSS...

[laurentSc]

Oui, merci ; j'ai corrigé (/*ul ul li, ul ul ul li{*/) mais ça n'arrange rien...