Différences

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

--- web:menucss [2024/03/30 10:31] – [3. Mise en forme du menu] phil
+++ web:menucss [2024/04/02 07:23] (Version actuelle) – [2. Création de la structure du menu] phil
@@ Ligne 3: / Ligne 3: @@
 ==== WEB - Conception d'un menu déroulant avec des règles CSS ====
-[Mise à jour le 30/3/2024]
+[Mise à jour le 1/4/2024]
   * **Ressources**
@@ Ligne 16: / Ligne 16: @@
 === 2. Création de la structure du menu  ===
-<callout type="info" icon="true">Le menu est créé à partir d'une liste non ordonnée. </callout>
+<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|}}
@@ Ligne 29: / Ligne 29: @@
     <title>Menu déroulant</title>
     <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 57: / Ligne 57: @@
 \\
+//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.
 === 3. Mise en forme du menu ===
 <callout type="warning" title="CSS" icon="true">Placer les règles CSS dans la page //**menu.css**//.</callout>
@@ Ligne 63: / Ligne 64: @@
  <code css *.css>
 body {
-    font: 12px "Lato", sans-serif;
+    font-family: "Lato", sans-serif;
+    font-size: 12px;
 }
 </code>
   * **3.2 Suppression du style par défaut des listes**
-  * Créer la règle 1 comme ci-dessous :
+Créer la règle 1 comme ci-dessous :
 {{ :web:structure2.png?nolink&160|}}
 <code css *.css>
@@ Ligne 77: / 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 87: / 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 99: / 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 109: / 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 119: / 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 131: / 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 155: / 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 166: / 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 199: / 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|}}