web:positioncss

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:positioncss [2023/06/18 18:32] – [2. Méthode proposée pour réaliser un gabarit (dimensionné en pixels)] philweb:positioncss [2023/06/18 18:45] (Version actuelle) – [WEB - Conception d'un gabarit CSS] phil
Ligne 4: Ligne 4:
  
 [Mise à jour le 18/6/2023] [Mise à jour le 18/6/2023]
- 
-  * **Sources** 
-    * MDN web docs 
-      * <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout" target="_blank">La mise en page avec le CSS</a></html> 
-      * <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Introduction" target="_blank">Introduction à la mise en page en CSS</a></html> 
  
   * **Ressources**   * **Ressources**
-    * CSS facile ! - <html><a href="http://www.css-faciles.com/" target="_blank">Propriétés CSS</a></html>+    * MDN web docs : <html><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps" target="_blank">CSS — Mettre en forme le Web</a></html>
  
   * **Liens connexes**   * **Liens connexes**
Ligne 59: Ligne 54:
  
 === 1.3 Calcul de la place occupée === === 1.3 Calcul de la place occupée ===
-<callout type="warning" icon="true">**La __place occupée__ par une boîte est calculée** en ajoutant les marges internes (**padding**), externes (**margin**) et l’épaisseur de la bordure (**border**).</callout>+<callout type="warning" color="red" icon="true">**La __place occupée__ par une boîte est calculée** en ajoutant les marges internes (**padding**), externes (**margin**) et l’épaisseur de la bordure (**border**).</callout>
  
 {{ :web:boiteex2.png?nolink&650 |}} {{ :web:boiteex2.png?nolink&650 |}}
Ligne 186: Ligne 181:
 </code> </code>
  
-<note important>Pour conserver l'occupation initiale des boîtes sur la page, il faut soustraire les marges au contenu.</note> +<callout type="warning" color="red" icon="true">Pour conserver l'occupation initiale des boîtes sur la page, il faut soustraire les marges au contenu.</callout>
  
 **Étape 4 - Simuler le contenu textuel** **Étape 4 - Simuler le contenu textuel**
Ligne 245: Ligne 240:
 </code> </code>
  
-<note tip>**Astuces** \\+<callout type="tip" icon="true">**Astuces** \\
  - Pour **centrer verticalement** le texte dans une boîte, remplacer height par //**line-height**//. \\   - Pour **centrer verticalement** le texte dans une boîte, remplacer height par //**line-height**//. \\ 
  - Pour **centrer horizontalement** le texte dans une boîte, utiliser : //**text-align:center**//; \\   - Pour **centrer horizontalement** le texte dans une boîte, utiliser : //**text-align:center**//; \\ 
Ligne 251: Ligne 246:
  - Pour **redimensionner automatiquement** une boîte après lui avoir appliqué du padding, \\ utiliser : **box-sizing:border-box**; \\  - Pour **redimensionner automatiquement** une boîte après lui avoir appliqué du padding, \\ utiliser : **box-sizing:border-box**; \\
  - Pour **centrer une image**, utiliser **margin:auto; display:flex;**  - Pour **centrer une image**, utiliser **margin:auto; display:flex;**
-</note> +</callout>
  
 ==== 3. Code de la démonstration ==== ==== 3. Code de la démonstration ====
-<html><a href="https://webge.fr/doc/tsin/tp/TSIN_WEB2a_Base_HTML_CSS_Code_demo.zip" title="démo">Télécharger<a></html> le code de la démonstration "**Comprendre le modèle de boîte**" +<html><a href="https://webge.fr/doc/tsin/tp/TSIN_WEB2a_Base_HTML_CSS_Code_demo.zip" title="démo"><strong>Télécharger</strong></a></html> le code de la démonstration **//Comprendre le modèle de boîte//** .
  
  • web/positioncss.1687105934.txt.gz
  • Dernière modification : 2023/06/18 18:32
  • de phil