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:32] – [2. Méthode proposée pour réaliser un gabarit (dimensionné en pixels)] phil | web:positioncss [2023/06/18 18:40] – [WEB - Conception d'un gabarit CSS] phil | ||
---|---|---|---|
Ligne 7: | Ligne 7: | ||
* **Sources** | * **Sources** | ||
* MDN web docs | * MDN web docs | ||
- | * < | + | * < |
* < | * < | ||
Ligne 59: | Ligne 59: | ||
=== 1.3 Calcul de la place occupée === | === 1.3 Calcul de la place occupée === | ||
- | <callout type=" | + | <callout type=" |
{{ : | {{ : | ||
Ligne 186: | Ligne 186: | ||
</ | </ | ||
- | <note important>Pour conserver l' | + | <callout type=" |
**Étape 4 - Simuler le contenu textuel** | **Étape 4 - Simuler le contenu textuel** | ||
Ligne 245: | 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 : // | ||
Ligne 251: | Ligne 251: | ||
- 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 ==== | ||
- | < | + | < |