Différences

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

--- web:menucss [2024/03/30 11:00] – [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>
@@ Ligne 130: / Ligne 132: @@
 </code>
-  * **3.8 On éloigne 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 On fait 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 154: / Ligne 155: @@
-  * **3.10 On place 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 165: / 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 On décale 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 On change 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 On souligne 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|}}