aligner horizontalement des listes

**laurentSc** · 10/09/2013, 23h10

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** · 11/09/2013, 01h25

Envoyé par laurentSc

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** · 11/09/2013, 09h05

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** · 11/09/2013, 10h55

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** · 11/09/2013, 11h19

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** · 11/09/2013, 11h36

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

**rodolphebrd** · 11/09/2013, 11h51

Je ne vois pas où voulez en venir

Car j'ai répondu à votre demande en obtenant cela :

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

**laurentSc** · 11/09/2013, 12h01

Oui, mais ce que je souhaite obtenir, c'est ce que je disais hier soir à 23h10...

**rodolphebrd** · 11/09/2013, 12h08

Désolé je suis parti dans la mauvaise direction

Je verrais donc 2 listes distinctes :

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
<ul class="menu">
  <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>
<ul class="menu">
  <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>

Code :

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

1
2
3
4
5
6
7
li{
	list-style: none;
}
.menu{
 
  float:left;
}

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

**laurentSc** · 11/09/2013, 15h16

Nickel

comme quand j'allais sur ton lien "codepen", y avait rien, j'ai été sur mon 2e PC et là, c'est bon...

Tu t'en sers comme éditeur html ? Moi, j'utilises bluegriffon (pour le html) et Notepad++ (pour le css, js, PHP, XML...)

et pour obtenir ça, comment faut faire ?

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

en gros :

colonne1 colonne2
colonne3 colonne4

mon réflexe serait un tableau html avec 2 lignes, mais est-ce bien ?

**Bovino** · 11/09/2013, 15h21

NON ! Ca fait des années qu'on te ressasse qu'il ne faut pas utiliser les tableaux pour la mise en page !

**rodolphebrd** · 11/09/2013, 16h00

A partir de 4 listes :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<ul class="menu">
  <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>
<ul class="menu">
  <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>
<ul class="menu clear">
  <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>
<ul class="menu">
  <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>

Code :

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

1
2
3
4
5
6
7
8
9
li{
   list-style: none;
}
.menu{
   float:left;
}
.clear{
   clear:left;
}

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

CodePen est en quelque sorte un bac à sable pour front-end. C'est une sorte d'IDE en ligne. Il y a 4 vues distinctes : HTML, CSS et JS et le rendu générer par le code.

Chaque Pen possède deux onglets : l’onglet « editor » où l’on peut voir les 4 vues et l’onglet « Details » qui permet de laisser un commentaire, d’avoir des stats et un descriptif du code en question.

On peut partager et forker sans même se loguer. Cela permet de retravailler un code librement et sauvegarder l’url unique générer automatiquement pour soi.

Il est possible de se logger et ainsi pouvoir déposer des commentaires et bénéficier d’options comme la personnalisation de l’url [allez dans Details].

**laurentSc** · 11/09/2013, 16h37

Envoyé par Bovino

NON ! Ca fait des années qu'on te ressasse qu'il ne faut pas utiliser les tableaux pour la mise en page !

Je le savais bien, mais je ne savais pas comment faire...et j'avoue que je saisie pas le rôle de "float" et "clear"..

**rodolphebrd** · 11/09/2013, 16h39

Consultez les tutos de DVP et faites de essais.

**laurentSc** · 11/09/2013, 16h46

Envoyé par rodolphebrd

Consultez les tutos de DVP et faites de essais..

Oui, mais j'ai tellement d'autres projets concernant le web (dont des tutos à lire)

**Bovino** · 11/09/2013, 16h55

Mais tu ne crois pas qu'en tant que Webmaster, une étape préalable essentielle est d'apprendre ?
Parce que là, si l'on t'écoute, tu ne connais pas HTML, tu ne connais pas CSS et tu ne connais pas JavaScript. Souvent, ce sont même les bases que tu ne connais pas. Pire, quand on te dit des choses, tu n'arrives pas à les assimiler.

Si on prend des exemples récents, je t'ai conseillé récemment d'utiliser Firebug que tu disais ne pas connaitre... alors que tu l'as installé il y a bientôt deux ans !

Ensuite, tu es inscrit depuis bientôt sept ans, avec 3 753 messages. Si pendant tout ce temps et avec les innombrables problèmes de débutant que tu rencontres, tu n'as jamais trouvé utile d'apprendre les rudiments, il y a un truc qui ne va pas quand même.

**laurentSc** · 11/09/2013, 17h15

Tu m'épates de retrouver cette vieille discussion ! Mais ce que je disais à l'époque :

Envoyé par laurentSc

Certes, mais j'ai démarré en 2006 et avant je ne connaissais même l'existence du mot "html" ! Donc, j'estime être encore un débutant (bien dégrossi) et avoir pas mal de choses à apprendre.

reste valable.

une étape préalable essentielle est d'apprendre ?

Je suis d'accord avec toi et d'ailleurs, j'ai plusieurs tutos dans mes favoris, mais il faut trouver le temps...

Invité · 12/09/2013, 16h55

Envoyé par laurentSc

Oui, mais j'ai tellement d'autres projets concernant le web (dont des tutos à lire)

Envoyé par laurentSc

... mais il faut trouver le temps...

Bonjour Laurent,

Tu es "bien gentil", mais en attendant que TU trouves le temps, tu mobilises PLUSIEURS personnes qui prennent de LEUR temps pour te répondre.

Tu trouves bien le temps de poster sur tous les forums DVP !!
Tu n'as pas l'impression d'abuser "un peu" de notre gentillesse et de notre patience ?

Muchos, Bovino, rodolphebrd, sabotage,... et moi-même : on a une vie en dehors de toi !

J'ajoute qu'au lieu de t'éparpiller dans plusieurs domaines de l'informatique (car tu t'es mis aussi à "apprendre" la POO PHP, au CSS, au JavaScript, à la danse de salon, au saut à l’élastique sans élastique,...), tu ferais mieux de TE CONCENTRER sur un domaine, et de t'y tenir, afin d'en maitriser AU MOINS les bases.

Ah ! Tu as de la chance que je t'aime bien, et que je n'ai ma casquette de "modérateur" que depuis peu, sinon...

**laurentSc** · 12/09/2013, 22h51

Bien noté, mais tous ces domaines m'intéressent, donc en abandonner, très dûr...

**Tendhor57** · 13/09/2013, 11h39

Envoyé par laurentSc

Bien noté, mais tous ces domaines m'intéressent, donc en abandonner, très dûr...

Bonjour,

On ne te demande pas d'abandonner ici certain domaine, mais plustot de faire comme tout bon programmeur web de base, commencer par le commencement en apprenant le language html, puis d'enchainer avec le CSS (ainsi déjà avec ces 2 langages maitriser tu pourra créer un site ou page web convenable)

Par la suite, tu pourra alors t'attaquer au javascript (pour "animer" ton site) puis au php/MySQL (si tu a des bases des données à gérer).

Voilà ceci sont les étapes à passer si tu veut pouvoir te débrouiller un peu par toi même.

D'autant plus que le HTML n'est qu'un language de "balisage" donc il te suffit de bien connaitre les balises (et y en a pas un milllions à connaitre non plus

pour pouvoir avancer).

Quant au CSS: il suffit de connaitre ce qu'est une class et un id et la syntaxe pour appliquer un style, le reste de ce langage étant des mots en anglais pour appliquer le style (ex: width=largeur, height=hauteur).

Donc il te suffit de mettre un peu du tiens et de retrousser tes manches ainsi tu pourra connaitre les langages de bases pour un site web.

aligner horizontalement des listes

Positionnement en CSS

Discussions similaires

Partager

Partager