Discussion :

[Hemgé]

Bonjour et déjà merci pour votre aide.

Je débute, donc je teste pour asseoir mes connaissances et ma compréhension.
Evidemment, je rencontre un problème et je me doute que ce n'est que le début ... !

Si j'ai bien compris :

(X)HTML

1. tant <UL> que <LI> génèrent des éléments en "boîte" et non en "ligne" ;
2. les éléments en "boîte" peuvent contenir d'autres éléments en "boîte" et/ou en "ligne" ;
3. chaque <UL> est parent immédiat des <LI> qu'il contient directement et ancêtre des <UL> et <LI> qui seront ensuite imbriqués ;
4. chaque <LI> est à son tour parent / ancêtre des <UL> et des <LI> de niveau inférieur qui y seront imbriqués.

CSS

1. une propriété "héritée" type color est automatiquement appliquée aux descendants ;
2. une propriété "non héritée" type display n'est pas appliquée aux descendants sauf forçage via la valeur "inherit" quand elle est permise.

Ouf !

Quand je teste avec color, j'observe que

• la propriété color appliquée à un <LI> de niveau donné n'affecte que ce <LI> et aucun des descendants qui y sont imbriqués, comme si l'héritage ne jouait pas ou qu'il n'y avait pas de descendance,
• tandis qu'appliquée à un <UL> de niveau donné, elle affecte ce <UL> et tous ses descendants.

Quand je teste avec dislay, j'observe que

• la propriété display appliquée à un <LI> de niveau donné n'affecte que ce <LI> et n'empêche pas l'affichage des niveaux inférieurs comme s'ils n'en étaient pas descendants ;
• tandis qu'appliquée à un <UL> de niveau donné, elle affecte ce <UL> et tous ses descendants.

Donc, non pas "y a un bug", mais qu'est-ce qui m'a échappé à propos des <UL> et des <LI> , où est mon bug ?

Je joins en annexe un exemple de code, avec une rubrique style imbriquée pour simplifier la consultation. Il suffit de jouer sur les classes et de mettre en remarque ou non pour tester.

Merci pour vos explications qui me permettront de mettre les notions en place.

[Macmillenium]

Bonjour,

Quand je teste avec color, j'observe que

• la propriété color appliquée à un <LI> de niveau donné n'affecte que ce <LI> et aucun des descendants qui y sont imbriqués, comme si l'héritage ne jouait pas ou qu'il n'y avait pas de descendance,
• tandis qu'appliquée à un <UL> de niveau donné, elle affecte ce <UL> et tous ses descendants.

Quand je teste avec dislay, j'observe que

• la propriété display appliquée à un <LI> de niveau donné n'affecte que ce <LI> et n'empêche pas l'affichage des niveaux inférieurs comme s'ils n'en étaient pas descendants ;
• tandis qu'appliquée à un <UL> de niveau donné, elle affecte ce <UL> et tous ses descendants.

Donc, non pas "y a un bug", mais qu'est-ce qui m'a échappé à propos des <UL> et des <LI> , où est mon bug ?

Je joins en annexe un exemple de code, avec une rubrique style imbriquée pour simplifier la consultation. Il suffit de jouer sur les classes et de mettre en remarque ou non pour tester.

Dans l'exemple que tu donne menu1_niv1_d n'a pas d'enfant ...

Code html :

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

1
2
 
 <li class="menu1_niv1_d">produits 1</li>

Tu verra bien la différence si tu fais :

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
        <li class="menu1_niv1_d">
            <ul class="menu1_niv2">
                <li class="menu1_niv2_d">catégorie 11</li>
                    <ul class="menu1_niv3">
                        <li>article 111</li>
                        <li>article 112</li>
                        <li>article 113</li>
                        <li>article 114</li>
                        <li>article 115</li>
                    </ul>
                <li class="menu1_niv2_d">catégorie 12</li>
                    <ul class="menu1_niv3">
                    </ul>
                <li class="menu1_niv2_d">catégorie 13</li>
                    <ul class="menu1_niv3">
                    </ul>
                <li class="menu1_niv2_d">catégorie 14</li>
                    <ul class="menu1_niv3">
                    </ul>
                <li class="menu1_niv2_d">catégorie 15</li>
                    <ul class="menu1_niv3">
                    </ul>
            </ul>
	</li>	

[desert]

Tu verra bien la différence si tu fais :

Je dirais même plus si tu fais ceci () :

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
<li class="menu1_niv1_d">
     <ul class="menu1_niv2">
          <li class="menu1_niv2_d">catégorie 11
               <ul class="menu1_niv3">
                    <li>article 111</li>
                    <li>article 112</li>
                    <li>article 113</li>
                    <li>article 114</li>
                    <li>article 115</li>
               </ul>
          </li>
          <li class="menu1_niv2_d">catégorie 12
               <ul class="menu1_niv3">
               </ul>
          </li>
          <li class="menu1_niv2_d">catégorie 13
               <ul class="menu1_niv3">
               </ul>
          </li>
          <li class="menu1_niv2_d">catégorie 14
               <ul class="menu1_niv3">
               </ul>
          </li>
          <li class="menu1_niv2_d">catégorie 15
               <ul class="menu1_niv3">
               </ul>
          </li>
     </ul>
</li>

Il n'y a donc pas de bug, juste une balise qui ne se ferme pas au bon endroit.
Quand tu crées un sous-menu (ul), il doit être déclaré à l'intérieur de la balise li (entre <li> et </li>). Hors dans ton code, tu fermes la balise li avant de créer un nouveau sous-menu.

[Hemgé]

Effectivement, maintenant, c'est tout bon.

Comme quoi il suffit de peu de choses !

Un tout grand merci pour ce coup de clavier et de souris.