Différences

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

--- 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:45] (Version actuelle) – [WEB - Conception d'un gabarit CSS] phil
@@ Ligne 4: / Ligne 4: @@
 [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**
-    * 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**
@@ Ligne 59: / Ligne 54: @@
 === 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 |}}
@@ Ligne 66: / 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">**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>
 === 2.1 Création de la maquette graphique===
 {{ :web:maquette1a.png?nolink&300|}}
@@ Ligne 186: / Ligne 181: @@
 </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**
@@ Ligne 245: / Ligne 240: @@
 </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 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 **centrer une image**, utiliser **margin:auto; display:flex;**
-</note>
+</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">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//** .