Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
web:menucssbase [2024/03/30 10:26] – 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 ==== | ==== WEB - Conception d'un menu simple avec des règles CSS ==== | ||
- | [Mise à jour le 30/3/2024] | + | [Mise à jour le 1/4/2024] |
* **Ressources** | * **Ressources** | ||
Ligne 16: | Ligne 16: | ||
=== 2. Création de la structure du menu === | === 2. Création de la structure du menu === | ||
- | <callout type=" | + | <callout type=" |
{{ : | {{ : | ||
Ligne 27: | Ligne 27: | ||
<meta charset=" | <meta charset=" | ||
< | < | ||
- | <link rel=" | + | <link rel=" |
- | < | + | < |
rel=' | rel=' | ||
</ | </ | ||
Ligne 46: | Ligne 46: | ||
</ | </ | ||
\\ | \\ | ||
+ | |||
+ | // | ||
=== 3. Mise en forme du menu === | === 3. Mise en forme du menu === | ||
- | Les règles CSS sont placées | + | <callout type=" |
- | * **3.1 Créer | + | * **3.1 Création d'une règle pour le corps de la page** |
< | < | ||
body { | body { | ||
- | font: 12px " | + | font-family: " |
+ | font-size: 12px; | ||
} | } | ||
</ | </ | ||
- | * **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 : | Créer la règle 1 comme ci-dessous : | ||
- | {{ :web:structure2.png?nolink&160|}} | + | {{ :web:structure2simple.png? |
<code css *.css> | <code css *.css> | ||
/* Règle 1 */ | /* Règle 1 */ | ||
Ligne 67: | Ligne 70: | ||
</ | </ | ||
- | * **3.3 Supprimer le soulignement des liens** | + | * **3.3 Suppression du soulignement des liens** |
Créer la règle 2 comme ci-dessous : | Créer la règle 2 comme ci-dessous : | ||
- | {{ :web:structure3.png?nolink&160|}} | + | {{ :web:structure3simple.png? |
<code css *.css> | <code css *.css> | ||
/* Règle 2 */ | /* Règle 2 */ | ||
Ligne 77: | Ligne 80: | ||
</ | </ | ||
- | * **3.4 Supprimer les marges par défaut** | + | * **3.4 Suppression des marges par défaut** |
- | Modifier | + | Compléter |
- | {{ : | + | |
<code css *.css> | <code css *.css> | ||
/* Règle 1 */ | /* Règle 1 */ | ||
nav ul { | nav ul { | ||
- | list-style: none; | ||
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
Ligne 89: | Ligne 91: | ||
</ | </ | ||
- | * **3.5 Cacher les sous-menus** | + | * **3.5 Afichage des liens « en ligne »** |
Créer la règle 3 comme ci-dessous : | Créer la règle 3 comme ci-dessous : | ||
- | {{ :web:structure5.png?nolink&60|}} | + | {{ :web:structure6simple.png? |
<code css *.css> | <code css *.css> | ||
- | /* Règle 3 */ | + | /* Règle 3 */ |
- | nav ul li ul { | + | |
- | display: none; | + | |
- | } | + | |
- | </ | + | |
- | + | ||
- | * **3.6 Aficher le premier niveau du menu « en ligne »** | + | |
- | Créer la règle 4 comme ci-dessous : | + | |
- | {{ : | + | |
- | <code css *.css> | + | |
- | /* Règle 4 */ | + | |
nav ul li { | nav ul li { | ||
float: left; | float: left; | ||
Ligne 109: | Ligne 101: | ||
</ | </ | ||
- | * **3.7 Régler | + | * **3.6 Réglage de la hauteur du menu et ajout de la couleur ** |
- | Modifier | + | Compléter |
- | {{ :web:structure7.png?nolink&200|}} | + | {{ :web:structure7simple.png? |
<code css *.css> | <code css *.css> | ||
- | /* Règle | + | /* Règle |
nav ul li { | nav ul li { | ||
background-color: | background-color: | ||
Ligne 121: | Ligne 113: | ||
</ | </ | ||
- | * **3.8 Éloigner les éléments du menu de premier niveau** | + | * **3.7 Les éléments du menu sont éloignés** |
- | Modifier | + | Compléter |
- | {{ :web:structure8.png? | + | {{ :web:structure8simple.png? |
<code css *.css> | <code css *.css> | ||
/* Règle 2 */ | /* Règle 2 */ | ||
nav ul li a { | nav ul li a { | ||
- | | + | |
- | | + | |
} | } | ||
</ | </ | ||