Différences

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

--- web:positioncss [2023/06/18 18:43] – [WEB - Conception d'un gabarit CSS] 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**
-    * MDN web docs
+    * 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>
-      * <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**
@@ Ligne 63: / 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">**Conseil** : afficher le code HTML, le code CSS et le résultat dans le navigateur sur le même écran pour faciliter la conception.</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 242: / Ligne 241: @@
 </code>
-<callout type="tip" icon="true">**Astuces** \\
+<callout type="tip" icon="true" title="Astuces">
  - 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** 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//** .