Différences

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

--- web:menucssbase [2024/04/02 07:04] – [3. Mise en forme 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 28: / Ligne 28: @@
   <title>Menu simple</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 46: / Ligne 46: @@
 </code>
 \\
+//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">Les règles CSS sont déclarées dans la page //**menu.css**//.</callout>
+<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>
@@ Ligne 83: / Ligne 86: @@
 /* Règle 1 */
 nav ul {
-    list-style: none;
     padding: 0;
     margin: 0;
@@ Ligne 103: / Ligne 105: @@
 {{ :web:structure7simple.png?nolink|}}
 <code css *.css>
-/* Règle 4 */
+/* Règle 3 */
 nav ul li {
     background-color: #64abfb;
@@ Ligne 113: / Ligne 115: @@
   * **3.7 Les éléments du menu sont éloignés**
 Compléter la règle 2 avec la déclaration de style ci-dessous :
-{{ :web:structure8simple.png?nolink|}}
+{{ :web:structure8simple.png?nolink&300|}}
 <code css *.css>
 /* Règle 2 */
 nav ul li a {
-    padding: 5px;
+    margin-left: 20px;
+    margin-left: 20px;
 }
 </code>