Différences

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

--- web:menucssbase [2024/03/30 10:24] – [2. Création de la structure du menu] phil
+++ web:menucssbase [2024/04/02 07:53] (Version actuelle) – [3. Mise en forme du menu] phil
@@ Ligne 3: / Ligne 3: @@
 ==== WEB - Conception d'un menu simple 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:structurebase.png?nolink|}}
@@ Ligne 27: / Ligne 27: @@
   <meta charset="utf-8">
   <title>Menu simple</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 47: / Ligne 47: @@
 \\
-=== 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 menu.css.
-  * **3.1 Créer une règle pour le corps de la page**
+=== 3. Mise en forme du menu ===
+<callout type="warning" title="CSS" icon="true">Les **règles** CSS sont déclarées dans la page //**menu.css**//.</callout>
+  * **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|}}
+{{ :web:structure2simple.png?nolink|}}
 <code css *.css>
 /* Règle 1 */
@@ Ligne 67: / Ligne 70: @@
 </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|}}
+{{ :web:structure3simple.png?nolink|}}
 <code css *.css>
 /* Règle 2 */
@@ Ligne 77: / Ligne 80: @@
 </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 89: / Ligne 91: @@
 </code>
-  * **3.5 Cacher les sous-menus**
+  * **3.5 Afichage des liens « en ligne »**
 Créer la règle 3 comme ci-dessous :
-{{ :web:structure5.png?nolink&60|}}
+{{ :web:structure6simple.png?nolink|}}
 <code css *.css>
-/* Règle 3 */
+/* Règle 3  */
-nav ul li ul {
-    display: none;
-}
-</code>
-  * **3.6 Aficher le premier niveau du menu « en ligne »**
-Créer la règle 4 comme ci-dessous :
-{{ :web:structure6.png?nolink&200|}}
-<code css *.css>
-/* Règle 4  */
 nav ul li {
     float: left;
@@ Ligne 109: / Ligne 101: @@
 </code>
-  * **3.7 Régler la hauteur du menu de premier niveau et ajouter de la couleur **
+  * **3.6 Réglage de la hauteur du menu et ajout de la couleur **
-Modifier la règle 4 come ci-dessous :
+Compléter la règle 3 avec les déclarations ci-dessous :
-{{ :web:structure7.png?nolink&200|}}
+{{ :web:structure7simple.png?nolink|}}
 <code css *.css>
-/* Règle 4 */
+/* Règle 3 */
 nav ul li {
     background-color: #64abfb;
@@ Ligne 121: / Ligne 113: @@
 </code>
-  * **3.8 Éloigner les éléments du menu de premier niveau**
+  * **3.7 Les éléments du menu 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|}}
+{{ :web:structure8simple.png?nolink&300|}}
 <code css *.css>
 /* Règle 2 */
 nav ul li a {
-    text-decoration: none;
+    margin-left: 20px;
-    padding: 5px;
+    margin-left: 20px;
 }
 </code>