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 [2023/06/18 18:29] – [1.1 Présentation] phil | web:positioncss [2024/04/30 09:43] – [2. Méthode proposée pour réaliser un gabarit (dimensionné en pixels)] phil | ||
---|---|---|---|
Ligne 3: | Ligne 3: | ||
===== WEB - Conception d'un gabarit CSS ===== | ===== WEB - Conception d'un gabarit CSS ===== | ||
- | [Mise à jour le 1/5/2022] | + | [Mise à jour le 18/6/2023] |
- | + | ||
- | * **Sources** | + | |
- | * MDN web docs | + | |
- | * < | + | |
- | * < | + | |
* **Ressources** | * **Ressources** | ||
- | * CSS facile ! - < | + | * MDN web docs : < |
* **Liens connexes** | * **Liens connexes** | ||
Ligne 47: | Ligne 42: | ||
=== 1.2 Reset CSS === | === 1.2 Reset CSS === | ||
- | <note tip> | + | <callout type="tip" icon=" |
- | </note> | + | |
<code css *.css> | <code css *.css> | ||
* { | * { | ||
Ligne 54: | Ligne 49: | ||
| | ||
} | } | ||
- | |||
</ | </ | ||
- | <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 67: | Ligne 61: | ||
"//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>Conseil | + | <callout type="tip" icon=" |
=== 2.1 Création de la maquette graphique=== | === 2.1 Création de la maquette graphique=== | ||
{{ : | {{ : | ||
Ligne 188: | Ligne 181: | ||
</ | </ | ||
- | <note important>Pour conserver l' | + | <callout type=" |
**Étape 4 - Simuler le contenu textuel** | **Étape 4 - Simuler le contenu textuel** | ||
Ligne 247: | Ligne 240: | ||
</ | </ | ||
- | <note tip>**Astuces** \\ | + | <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 : // | ||
Ligne 253: | Ligne 246: | ||
- 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: | - Pour **centrer une image**, utiliser **margin: | ||
- | </note> | + | </callout> |
==== 3. Code de la démonstration ==== | ==== 3. Code de la démonstration ==== | ||
- | < | + | < |