From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/layout_cookbook/index.html | 84 +++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 files/fr/web/css/layout_cookbook/index.html (limited to 'files/fr/web/css/layout_cookbook/index.html') diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..dc96a66da3 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/index.html @@ -0,0 +1,84 @@ +--- +title: CSS Layout cookbook +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - Guide + - recettes +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.

+ +
+

Note : Si vous débutez en CSS, nous vous conseillons de consulter notre module sur l'apprentissage de la disposition en CSS. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.

+
+ +

Les recettes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecetteDescriptionMéthodes de disposition utilisées
Objets avec médiaUne boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page).Grilles CSS, {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}}
ColonnesComment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu.Grilles CSS, Disposition multi-colonnes, Flexbox
Centrer un élémentComment centrer un élément horizontalement et verticalement.Flexbox, Alignement des boîtes
Bas de page adhérantCréer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (viewport) lorsque le contenu est plus petit que la zone ou le conteneur.Grilles CSS, Flexbox
Navigation segmentéeUn motif de navigation où certains liens sont séparés des autres.Flexbox, {{cssxref("margin")}}
Navigation avec un fil d'Ariane (breadcrumb)Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages.Flexbox
Liste de groupes avec indicateursAfficher une liste d'éléments avec chacun un indicateur numérique.Flexbox, Alignement des boîtes
PaginationComment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple).Flexbox, Alignement des boîtes
CarteUn composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes.Grilles CSS
Envelopper une grille (grid wrapper)Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords.Grilles CSS
+ +

Contribuer en créant une recette

+ +

MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! Voir cette page pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.

-- cgit v1.2.3-54-g00ecf