Discussion :

[laurentSc]

Bonsoir,

ce que je cherche à faire semble évident et pourtant, j'y arrive pas...Bon, pas une lumière en CSS...

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
<div id="navigation">
 
<ul class="menu">
  <li><span class="level0">lev0</span>
	<ul  class="menu1">
      <li><span class="level1">lev1</span>
        <ul>
          <li><span class="level2">lev2</span></li>
          <li><span class="level2">lev2</span></li>
          <li><span class="level2">lev2</span></li>
          <li><span class="level2">lev2</span></li>
        </ul>
      </li>
      <li><span class="level1">lev1</span></li>
      <li><span class="level1">lev1</span>
        <ul>
          <li><span class="level2">lev2</span></li>
          <li><span class="level2">lev2</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
....

Code css :

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
<style>
#navigation { width:790px; }
#navigation .menu { float:left;width:200px; margin:0; padding:0; }
#navigation ul li { list-style:none; width:100px;}
 
.clear{
   clear:left; list-style: none;
} 
.level0 {
background-color:#EAEAEA; 
 width:100px;
}
 .level1 {
 display: inline-block;
 width:100px;
  line-height:30px;
  padding-left:30px;
  background: url(http://---/green_bullet.gif) left no-repeat; 
 }
.level1:hover {background-color:#87D300; } 
 
  .level2 {
 display: inline-block;
  line-height:30px;
  padding-left:30px;
  background: url(Puce_Fleche_15.jpg) left no-repeat; 
 
 }
</style>

et j'arrive pas à élargir le "lev0" (span de classe "lev0")

[Invité]

Code css :

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

1
2
#navigation .menu { float:left;width:200px; margin:0; padding:0; }
#navigation ul li { list-style:none; width:100px;}

+ tu définis PARTOUT des width pas forcément utiles !
Les <ul>, <li>, comme les <div> font PAR DEFAUT : width:100%;
Tu peux aussi mettre en % : width:33%;

Il faut VRAIMENT que tu APPRENNES le CSS !!
Et arrête de nous dire que TU N'AS PAS LE TEMPS !!

Ca commence continue à être de plus en plus pénible...

[laurentSc]

C'est clair que ça serait mieux si je prenais le temps de me former sur le CSS, mais que me conseilles-tu sachant que j'ai déjà parcouru plusieurs tutos et que bien ayant appris certaines choses, pas assez...

[rodolphebrd]

Je vous conseillerais, de manière très scolaire, d'apprendre par cœur ce que vous avez déjà vu.

[NoSmoking]

Bonjour,

sachant que j'ai déjà parcouru plusieurs tutos et que bien ayant appris certaines choses, pas assez...

parcourir n'est pas suffisant, il faut comprendre ce que tu lis.

La base reste de faire des exercices pour voir directement l'influence de telle ou telle propriété.

On apprend en testant pas en recopiant

[laurentSc]

OK, vu les remarques, je reprends à 0...

[Invité]

...et j'arrive pas à élargir le "lev0" (span de classe "lev0")

Laurent,
tu as mis des width:... un peu partout dans ton code.

• C'est que TU SAIS ce que widthsignifie, non ?
• Tu sais lire, aussi, non ?
• et c'est bien toi qui as écrit le code ?

Au lieu d'ouvrir une Énième discussion, utilise ton cerveau, et tu devrais donc être capable de faire le lien entre "ton problème" et "un début de solution possible", en l’occurrence les "width" dans ton code.

On ne va quand même pas tous te prendre par la main à chaque fois !
(même si je n'ai rien contre la Gay Pride...)

[laurentSc]

C'est que TU SAIS ce que width signifie, non ?

C'est une des premières choses que j'ai apprises quand j'ai commencé à apprendre le html (bien avant de savoir qu'il y avait le CSS...)

et c'est bien toi qui as écrit le code ?

En fait une grosse partie vient de toi-même (ou aussi d'autres personnes sur ce forum) et je l'ai juste un peu adapté...

tu as mis des width:... un peu partout dans ton code.

il y en a, si je les enlève, ça ne va plus du tout. (je souhaite un affichage des listes sur 2 lignes et si j'en enlève trop, c'est soit tout vertical, soit les listes sont trop collées les unes aux autres). Explication :

Code css :

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
 
#navigation { width:790px; } /* si j'enlève cette ligne, affichage vertical des listes */
#navigation .menu { float:left; width:30%; margin:0; padding:0; } /* si j'enlève le width, listes collées les unes aux autres */
#navigation ul li { list-style:none;
}
 
.clear{
   clear:left;
} 
.level0 {
background-color:#EAEAEA; 
width:60px;
}
 .level1 {
 display: inline-block;
  width:30px;
  line-height:30px;
  padding-left:30px;
  background: url(http://www.schneider-electric.fr/gc_1_0/images/structure/green_bullet.gif) left no-repeat; 
 }
.level1:hover {background-color:#87D300; } 
 
  .level2 {
 display: inline-block;
  width:30px;
  line-height:30px;
  padding-left:30px;
  background: url(Puce_Fleche_15.jpg) left no-repeat; 
 
 }

(même si je n'ai rien contre la Gay Pride...)

Ils ont le droit de vivre aussi...

[Invité]

[CODE=css]
#navigation { width:790px; } /* si j'enlève cette ligne, affichage vertical des listes */
#navigation .menu { float:left; width:30%; margin:0; padding:0; } /* si j'enlève le width, listes collées les unes aux autres */

Comprends-tu au moins ce que tu écris (ou ce qu'on te propose comme solutions) ?

Tu veux 2 lignes (je suppose que tu veux dire 2 colonnes).
Or, si tu mets float:left; width:30%; on aura plutôt jusqu'à 3 colonnes cote-à-cote. (30% + 30% + 30% < 100%).
Et les colonnes font alors : 30% de 790px (leur conteneur) = 237px

avec un peu de jugeote : width:50%; ne serait-il pas plus adapté ?

[NoSmoking]

Sans vouloir en ajouter une couche,

Code :

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

<li><span class="level2">lev2</span></li>

ils te servent à quoi tous ces SPANs

Code html :

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

1
2
3
4
5
<ul class="niveau_1">
  <li></li>
  <li></li>
  <li></li>
</ul>

et ciblage CSS

Code css :

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

1
2
3
ul.niveau_1 li{
  width:120px;
}

cela allégerait pas mal ton code.

[Invité]

Sans vouloir en ajouter une couche...

C'est ce qu'on appelle "l'incontinence du débutant".

Ce n'est qu'avec l'expérience qu'on acquière la connaissance (et vice versa !) permettant d'alléger son code, et de se passer de couche.

[laurentSc]

de se passer de couche

Je suppose qu'il s'agit d'une couche logicielle et pas de Pampers

Pourquoi 2 colonnes ? Je parlais bien de lignes (c'est ce que je voulais dire)

Les span me servent à n'appliquer le style que là où il faut et pas dans une li complète ; exemple :

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
<ul class="menu">
  <li><span class="level0">lev0</span> <!-- la classe 'lev0' ne doit s'appliquer que sur cette ligne, et pas à l'ul juste après... -->
	<ul  class="menu1">
      <li><span class="level1">lev1</span>
        <ul>
          <li><span class="level2">lev2</span></li>
          <li><span class="level2">lev2</span></li>
          <li><span class="level2">lev2</span></li>
          <li><span class="level2">lev2</span></li>
        </ul>
      </li>
      <li><span class="level1">lev1</span></li>
      <li><span class="level1">lev1</span>
        <ul>
          <li><span class="level2">lev2</span></li>
          <li><span class="level2">lev2</span></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>