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 [2021/08/11 11:13] philweb:positioncss [2023/06/18 18:45] (Version actuelle) – [WEB - Conception d'un gabarit CSS] phil
Ligne 3: Ligne 3:
 ===== WEB - Conception d'un gabarit CSS ===== ===== WEB - Conception d'un gabarit CSS =====
  
-[Mise à jour le 2/10/2020] +[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** 
 +    * [[web:baseshtml|WEB - Les bases du HTML]] 
 +    * [[web:basescss|WEB - Les bases du CSS]] 
 + 
 +----
  
   * **Mots-clés** : boîte, contenu, marge interne et externe, bord, positionnement.   * **Mots-clés** : boîte, contenu, marge interne et externe, bord, positionnement.
Ligne 30: Ligne 31:
 === 1.1 Présentation === === 1.1 Présentation ===
  
-<note>En **HTML**, chaque élément est considéré comme une **boîte**. Aux dimensions induites par son **contenu** s’ajoutent souvent les espaces de **marges externes (__margin__)** ou **internes (__padding__)** et une **bordure (__border__**).</note>+<callout type="info" icon="true">En **HTML**, chaque élément est considéré comme une **boîte**. Aux dimensions induites par son **contenu** s’ajoutent souvent les espaces de **marges externes (__margin__)** ou **internes (__padding__)** et une **bordure (__border__**).</callout>
  
 {{ :web:boite.png?nolink&200 |}} {{ :web:boite.png?nolink&200 |}}
- +<callout type="warning" icon="true">Les propriétés **border**, **margin** et **padding** ne sont pas obligatoires. Non renseignés, elles prendront une valeur par défaut, toujours **nulle** pour les éléments en ligne. En revanche **parmi les éléments de type bloc, seul <div> n’a pas de marge par défaut**.</callout>
-<note warning>Les propriétés **border**, **margin** et **padding** ne sont pas obligatoires. Non renseignés, elles prendront une valeur par défaut, toujours **nulle** pour les éléments en ligne. En revanche **parmi les éléments de type bloc, seul <div> n’a pas de marge par défaut**.</note>+
  
 __Exemple__ __Exemple__
 {{ :web:boiteex1.png?nolink |}} {{ :web:boiteex1.png?nolink |}}
  
-<note>Les **paragraphes** s’affichent les **un en dessous des autres**, l’espace les séparant correspond à leurs marges externes (16px dans l'exemple ci-dessus).</note>+<callout type="info" icon="true">Les **paragraphes** s’affichent les **un en dessous des autres**, l’espace les séparant correspond à leurs marges externes (16px dans l'exemple ci-dessus).</callout>
  
 === 1.2 Reset CSS === === 1.2 Reset CSS ===
-<note tip>**Pour supprimer les marges de tous les éléments**, il suffit d’écrire le code suivant dans une feuille de style. +<callout type="tip" icon="true">**Pour supprimer les marges de tous les éléments**, il suffit d’écrire le code suivant dans une feuille de style.</callout> 
-</note>+
 <code css *.css> <code css *.css>
 * { * {
Ligne 49: Ligne 49:
    margin : 0px ;    margin : 0px ;
  
- 
 </code> </code>
  
-<note tip>Lors de la mise en page, la suppression des marges de tous les éléments permet de **ne pas être  gêné par des dimensions non choisies**.</note>+<callout type="tip" icon="true">Lors de la mise en page, la suppression des marges de tous les éléments permet de **ne pas être  gêné par des dimensions non choisies**.</callout>
  
 === 1.3 Calcul de la place occupée === === 1.3 Calcul de la place occupée ===
-<note important>**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**).</note>+<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 62: 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.  "//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. 
  
-<note tip>Conseil : afficher le code HTML, le code CSS et le résultat dans le navigateur sur le même écran pour faciliter la conception.</note> +<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=== === 2.1 Création de la maquette graphique===
 {{ :web:maquette1a.png?nolink&300|}} {{ :web:maquette1a.png?nolink&300|}}
-On **dessine** la **maquette** (**Fig1**) du site à la main et on **dimensionne** les boîtes. Les dimensions sont choisies en tenant compte de leur contenu.+On **dessine** la **maquette graphique** (**Fig1a**) du site à la main et on **dimensionne** les boîtes (**Fig1b**). Les dimensions sont choisies en tenant compte de leur contenu.
 {{ :web:maquette1b.png?nolink |}} {{ :web:maquette1b.png?nolink |}}
  
Ligne 74: Ligne 72:
   - On présente le contenu de la page avec **une** ou plusieurs feuilles de style (code **CSS**) en procédant par étape.   - On présente le contenu de la page avec **une** ou plusieurs feuilles de style (code **CSS**) en procédant par étape.
    
-**Étape 1 - Faire apparaître les blocs**+**Étape 1 - Faire apparaître les conteneurs**
    
 Supprimer les **marges extérieures par défaut** de toutes les balises  (**margin**). Déclarer et dimensionner les **conteneurs** (header, footer, section, div, etc.). Faire apparaitre les conteneurs avec des couleurs (**Fig2**). Supprimer les **marges extérieures par défaut** de toutes les balises  (**margin**). Déclarer et dimensionner les **conteneurs** (header, footer, section, div, etc.). Faire apparaitre les conteneurs avec des couleurs (**Fig2**).
Ligne 108: Ligne 106:
 </code> </code>
  
-**Étape 2 - Placer les blocs**+**Étape 2 - Placer les conteneurs**
  
 **Placer** les **conteneurs** conformément à la maquette graphique. (**Fig3**) **Placer** les **conteneurs** conformément à la maquette graphique. (**Fig3**)
Ligne 149: Ligne 147:
 </code> </code>
  
-**Étape 3 - Eloigner les blocs (éventuellement)**+**Étape 3 - Eloigner les conteneurs (éventuellement)**
  
 ** Affiner** le positionnement des blocs en plaçant des marges extérieures (**margin**) (**Fig4**) ** Affiner** le positionnement des blocs en plaçant des marges extérieures (**margin**) (**Fig4**)
Ligne 183: 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 217: Ligne 215:
 ** Étape 5 - Faire les finitions** ** Étape 5 - Faire les finitions**
 {{ :web:boiteex6d.png?nolink&400|}} {{ :web:boiteex6d.png?nolink&400|}}
 +
 **Remplacer** le texte "//Lorem Ipsum//" et faire les **finitions** (bords arrondis, bordures, taille de texte, police de caractère factoriser le code, etc.) (**Fig6**). **Remplacer** le texte "//Lorem Ipsum//" et faire les **finitions** (bords arrondis, bordures, taille de texte, police de caractère factoriser le code, etc.) (**Fig6**).
  
Ligne 241: 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**//; \\ 
  - Pour **centrer horizontalement** une boîte sur l'écran (par exemple la page), utiliser :  **margin: 0 auto**; \\   - 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**;</note+ - 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;** 
 +</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.1628673212.txt.gz
  • Dernière modification : 2021/08/11 11:13
  • de phil