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:39] – [3. Code de la démonstration] philweb:positioncss [2024/04/30 09: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 18/6/2023] +[Mise à jour le 30/4/2024]
- +
-  * **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 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.  "//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=== === 2.1 Création de la maquette graphique===
 {{ :web:maquette1a.png?nolink&300|}} {{ :web:maquette1a.png?nolink&300|}}
Ligne 245: Ligne 240:
 </code> </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 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**//; \\ 
  • web/positioncss.1687106358.txt.gz
  • Dernière modification : 2023/06/18 18:39
  • de phil