Différences

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

--- web:positioncss [2024/04/30 09:44] – [2. Méthode proposée pour réaliser un gabarit (dimensionné en pixels)] phil
+++ web:positioncss [2025/06/19 19:24] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 3: / Ligne 3: @@
 ===== WEB - Conception d'un gabarit CSS =====
-[Mise à jour le 18/6/2023]
+[Mise à jour le 11/6/2025]
   * **Ressources**
@@ Ligne 61: / 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//." Wikipédia.
-<callout type="tip" icon="true" title="Conseil">Pour faciliter la conception du code, afficher le code HTML, le code CSS et le rendu dans le navigateur côte à côte sur l'écran.</callout>
+<callout type="tip" icon="true" title="Conseil">Pour **faciliter la conception du code**, afficher le code HTML, le code CSS et le rendu dans le navigateur côte à côte sur l'écran.</callout>
 === 2.1 Création de la maquette graphique===
 {{ :web:maquette1a.png?nolink&300|}}
@@ Ligne 244: / Ligne 245: @@
  - Pour **centrer horizontalement** le texte dans une boîte, utiliser : //**text-align:center**//; \\
  - Pour **centrer horizontalement** une boîte sur l'écran (par exemple la page), utiliser :  **margin: 0 auto**; \\
- - 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:0 auto;** <callout>
-</callout>
 ==== 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"><strong>Télécharger</strong></a></html> le code de la démonstration **//Comprendre le modèle de boîte//** .
+<html><a href="https://webge.fr/doc/commun/TP/WEB2a_Base_HTML_CSS_Code_demo.zip" title="démo"><b>Télécharger</b></a></html> le code de la démonstration **//Comprendre le modèle de boîte//** .