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 Prochaine révisionLes deux révisions suivantes | ||
web:positioncss [2021/08/11 11:13] – phil | web:positioncss [2023/06/18 18:39] – [3. Code de la démonstration] phil | ||
---|---|---|---|
Ligne 3: | Ligne 3: | ||
===== WEB - Conception d'un gabarit CSS ===== | ===== WEB - Conception d'un gabarit CSS ===== | ||
- | [Mise à jour le 2/10/2020] | + | [Mise à jour le 18/6/2023] |
* **Sources** | * **Sources** | ||
Ligne 12: | Ligne 12: | ||
* **Ressources** | * **Ressources** | ||
* CSS facile ! - < | * CSS facile ! - < | ||
+ | |||
+ | * **Liens connexes** | ||
+ | * [[web: | ||
+ | * [[web: | ||
+ | |||
+ | ---- | ||
* **Mots-clés** : boîte, contenu, marge interne et externe, bord, positionnement. | * **Mots-clés** : boîte, contenu, marge interne et externe, bord, positionnement. | ||
Ligne 30: | Ligne 36: | ||
=== 1.1 Présentation === | === 1.1 Présentation === | ||
- | <note>En **HTML**, chaque élément est considéré comme une **boîte**. Aux dimensions induites par son **contenu** s’ajoutent souvent les espaces de **marges externes (__margin__)** ou **internes (__padding__)** et une **bordure (__border__**).</ | + | <callout type=" |
{{ : | {{ : | ||
- | + | <callout type="warning" icon=" | |
- | <note warning> | + | |
__Exemple__ | __Exemple__ | ||
{{ : | {{ : | ||
- | <note>Les **paragraphes** s’affichent les **un en dessous des autres**, l’espace les séparant correspond à leurs marges externes (16px dans l' | + | <callout type=" |
=== 1.2 Reset CSS === | === 1.2 Reset CSS === | ||
- | <note tip> | + | <callout type="tip" icon=" |
- | </note> | + | |
<code css *.css> | <code css *.css> | ||
* { | * { | ||
Ligne 49: | Ligne 54: | ||
| | ||
} | } | ||
- | |||
</ | </ | ||
- | <note tip>Lors de la mise en page, la suppression des marges de tous les éléments permet de **ne pas être gêné par des dimensions non choisies**.</ | + | <callout type="tip" icon=" |
=== 1.3 Calcul de la place occupée === | === 1.3 Calcul de la place occupée === | ||
- | <note important>**La __place occupée__ par une boîte est calculée** en ajoutant les marges internes (**padding**), | + | <callout type=" |
{{ : | {{ : | ||
Ligne 62: | Ligne 66: | ||
"//Un gabarit, souvent nommé template, est un patron de mise en page où l'on place images et textes. Aussi, il est souvent utilisé de manière répétitive pour créer des documents présentant une même structure// | "//Un gabarit, souvent nommé template, est un patron de mise en page où l'on place images et textes. Aussi, il est souvent utilisé de manière répétitive pour créer des documents présentant une même structure// | ||
- | <note tip> | + | <callout type="tip" icon=" |
=== 2.1 Création de la maquette graphique=== | === 2.1 Création de la maquette graphique=== | ||
{{ : | {{ : | ||
- | On **dessine** la **maquette** (**Fig1**) du site à la main et on **dimensionne** les boîtes. Les dimensions sont choisies en tenant compte de leur contenu. | + | On **dessine** la **maquette |
{{ : | {{ : | ||
Ligne 74: | Ligne 77: | ||
- On présente le contenu de la page avec **une** ou plusieurs feuilles de style (code **CSS**) en procédant par étape. | - On présente le contenu de la page avec **une** ou plusieurs feuilles de style (code **CSS**) en procédant par étape. | ||
- | **Étape 1 - Faire apparaître les blocs** | + | **Étape 1 - Faire apparaître les conteneurs** |
Supprimer les **marges extérieures par défaut** de toutes les balises | Supprimer les **marges extérieures par défaut** de toutes les balises | ||
Ligne 108: | Ligne 111: | ||
</ | </ | ||
- | **Étape 2 - Placer les blocs** | + | **Étape 2 - Placer les conteneurs** |
**Placer** les **conteneurs** conformément à la maquette graphique. (**Fig3**) | **Placer** les **conteneurs** conformément à la maquette graphique. (**Fig3**) | ||
Ligne 149: | Ligne 152: | ||
</ | </ | ||
- | **Étape 3 - Eloigner les blocs (éventuellement)** | + | **Étape 3 - Eloigner les conteneurs |
** Affiner** le positionnement des blocs en plaçant des marges extérieures (**margin**) (**Fig4**) | ** Affiner** le positionnement des blocs en plaçant des marges extérieures (**margin**) (**Fig4**) | ||
Ligne 183: | Ligne 186: | ||
</ | </ | ||
- | <note important>Pour conserver l' | + | <callout type=" |
**Étape 4 - Simuler le contenu textuel** | **Étape 4 - Simuler le contenu textuel** | ||
Ligne 217: | Ligne 220: | ||
** Étape 5 - Faire les finitions** | ** Étape 5 - Faire les finitions** | ||
{{ : | {{ : | ||
+ | |||
**Remplacer** le texte "// | **Remplacer** le texte "// | ||
Ligne 241: | Ligne 245: | ||
</ | </ | ||
- | <note tip> | + | <callout type="tip" icon=" |
- Pour **centrer verticalement** le texte dans une boîte, remplacer height par // | - Pour **centrer verticalement** le texte dans une boîte, remplacer height par // | ||
- Pour **centrer horizontalement** le texte dans une boîte, utiliser : // | - Pour **centrer horizontalement** le texte dans une boîte, utiliser : // | ||
- Pour **centrer horizontalement** une boîte sur l' | - Pour **centrer horizontalement** une boîte sur l' | ||
- | - Pour **redimensionner automatiquement** une boîte après lui avoir appliqué du padding, \\ utiliser : **box-sizing: | + | - Pour **redimensionner automatiquement** une boîte après lui avoir appliqué du padding, \\ utiliser : **box-sizing: |
+ | - Pour **centrer une image**, utiliser **margin: | ||
+ | </callout> | ||
==== 3. Code de la démonstration ==== | ==== 3. Code de la démonstration ==== | ||
- | < | + | < |