Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:menucss [2023/06/18 18:24] – phil
+++ web:menucss [2025/06/19 19:24] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 3: / Ligne 3: @@
 ==== WEB - Conception d'un menu déroulant avec des règles CSS ====
-[Mise à jour le 18/6/2023]
+[Mise à jour le 1/4/2024]
   * **Ressources**
@@ Ligne 11: / Ligne 11: @@
 ----
-=== 1 Organisation du répertoire du projet ===
+=== 1 Organisation du répertoire de travail ===
-Créer un répertoire et l'organiser comme ci-dessous
+  * Créer un répertoire et l'organiser comme ci-dessous.
 {{ :web:repmenu.png?nolink |}}
-=== 2. Créer la strucure du menu  ===
+=== 2. Création de la structure du menu  ===
+<callout type="info" icon="true">La **structure** du menu est créée dans le fichier //**menu.html**// à l'aide d'une **liste non ordonnée** . </callout>
 {{ :web:structure.png?nolink&160|}}
-Compléter le fichier index.html comme ci-dessous.
+  * Compléter le fichier //**menu.html**// comme ci-dessous.
 <code html *.html>
 <!DOCTYPE html>
@@ Ligne 25: / Ligne 28: @@
     <meta charset="utf-8">
     <title>Menu déroulant</title>
-    <link rel="stylesheet" type="text/css" href="styles/style.css" />
+    <link rel="stylesheet" type="text/css" href="styles/menu.css" />
-    <!--<link href='http://fonts.googleapis.com/css?family=Lato'
+    <!--<link href='https://fonts.googleapis.com/css?family=Lato'
     rel='stylesheet' type='text/css' />-->
 </head>
@@ Ligne 52: / Ligne 55: @@
 </html>
 </code>
+\\
-=== 3. Mettre le menu en forme ===
+//Remarque// : le lien en commentaire montre comment utiliser une <html><a href="https://developers.google.com/fonts/docs/getting_started?hl=fr" target="_blank">police de caractères</a></html> Google.
-Les règles CSS sont placées dans la page style.css.
+=== 3. Mise en forme du menu ===
+<callout type="warning" title="CSS" icon="true">Placer les règles CSS dans la page //**menu.css**//.</callout>
-  * **3.1 Créer une règle pour la page**
+  * **3.1 Création d'une règle pour le corps de la page**
  <code css *.css>
 body {
-    font: 12px "Lato", sans-serif;
+    font-family: "Lato", sans-serif;
+    font-size: 12px;
 }
 </code>
-  * **3.2 Supprimer le style par défaut des listes**
+  * **3.2 Suppression du style par défaut des listes**
 Créer la règle 1 comme ci-dessous :
 {{ :web:structure2.png?nolink&160|}}
@@ Ligne 73: / Ligne 79: @@
 </code>
-  * **3.3 Supprimer le soulignement des liens**
+  * **3.3 Suppression du soulignement des liens**
 Créer la règle 2 comme ci-dessous :
 {{ :web:structure3.png?nolink&160|}}
@@ Ligne 83: / Ligne 89: @@
 </code>
-  * **3.4 Supprimer les marges par défaut**
+  * **3.4 Suppression des marges par défaut**
-Modifier la règle 1 comme ci-dessous :
+Compléter la règle 1 avec les déclarations ci-dessous :
 {{ :web:structure4.png?nolink&100|}}
 <code css *.css>
 /* Règle 1 */
 nav ul {
-    list-style: none;
     padding: 0;
     margin: 0;
@@ Ligne 95: / Ligne 100: @@
 </code>
-  * **3.5 Cacher les sous-menus**
+  * **3.5 Les sous-menus sont masqués**
 Créer la règle 3 comme ci-dessous :
 {{ :web:structure5.png?nolink&60|}}
@@ Ligne 105: / Ligne 110: @@
 </code>
-  * **3.6 Aficher le premier niveau du menu « en ligne »**
+  * **3.6 Afichage du premier niveau du menu « en ligne »**
 Créer la règle 4 comme ci-dessous :
 {{ :web:structure6.png?nolink&200|}}
@@ Ligne 115: / Ligne 120: @@
 </code>
-  * **3.7 Régler la hauteur du menu de premier niveau et ajouter de la couleur **
+  * **3.7 Réglage de la hauteur du menu de premier niveau et ajout de la couleur **
-Modifier la règle 4 come ci-dessous :
+Compléter la règle 4 avec les déclarations ci-dessous :
 {{ :web:structure7.png?nolink&200|}}
 <code css *.css>
@@ Ligne 127: / Ligne 132: @@
 </code>
-  * **3.8 Éloigner les éléments du menu de premier niveau**
+  * **3.8 Les éléments du menu de premier niveau sont éloignés**
-Modifier la règle 2 comme ci-dessous :
+Compléter la règle 2 avec la déclaration de style ci-dessous :
 {{ :web:structure8.png?nolink&200|}}
 <code css *.css>
 /* Règle 2 */
 nav ul li a {
-    text-decoration: none;
     padding: 5px;
 }
 </code>
-  * **3.9 Faire apparaître les sous-menus au passage de la souris**
+  * **3.9 Apparition des sous-menus au passage de la souris**
 Créer la règle 5 comme ci-dessous :
 {{ :web:structure9.png?nolink|}}
@@ Ligne 151: / Ligne 155: @@
-  * **3.10 Placer les items des sous-menus verticalement**
+  * **3.10 Placement des items des sous-menus verticalement**
 Créer la règle 6 comme ci-dessous :
 {{ :web:structure10.png?nolink&220|}}
@@ Ligne 162: / Ligne 166: @@
 <callout type="info" icon="true"><html>La propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" target="_blank">float</a></html> sur MDN Web Docs</callout>
-  * **3.11 Décaler les sous-menus sur la gauche de npx**
+  * **3.11 Décalage des sous-menus sur la gauche de n pixel**
-Modifier la règle 5 comme ci-dessous
+Compléter la règle 5 avec la déclaration de style ci-dessous :
 {{ :web:structure11.png?nolink&220|}}
 <code css *.css>
 /* Règle 5 */
 nav ul li:hover ul {
-    display: list-item;
-    position: absolute;
     margin-left: -10px;
 }
 </code>
-  * **3.12 Changer la couleur du texte**
+  * **3.12 Changement de la couleur du texte**
-Modifier la règle 2 comme ci-dessous :
+Compléter la règle 2 avec la déclaration de style ci-dessous :
 {{ :web:structure12.png?nolink&220|}}
 <code css *.css>
 nav ul li a {
-    text-decoration: none;
-    padding: 5px;
     color: #FFF;
 }
 </code>
-  * **3.13 Souligner le texte au passage de la souris **
+  * **3.13 Le texte est souligné au passage de la souris **
 Créer la règle 7 comme ci-dessous :
 {{ :web:structure13.png?nolink&220|}}
@@ Ligne 195: / Ligne 195: @@
 </code>
-  * **3.14 Faire les finitions **
+  * **3.14 On fait les finitions **
 Créer la règle 8. Modifier les règles 1, 2 et 5 comme ci-dessous :
 {{ :web:structure14.png?nolink&220|}}