From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- files/fr/learn/css/css_layout/flexbox/index.html | 54 +++--- .../learn/css/css_layout/flexbox_skills/index.html | 28 +-- files/fr/learn/css/css_layout/floats/index.html | 108 ++++------- .../fundamental_layout_comprehension/index.html | 92 +++++----- files/fr/learn/css/css_layout/grids/index.html | 137 +++++--------- files/fr/learn/css/css_layout/index.html | 9 +- .../learn/css/css_layout/introduction/index.html | 153 ++++++---------- .../css_layout/legacy_layout_methods/index.html | 68 ++++--- .../learn/css/css_layout/media_queries/index.html | 100 +++++------ .../css_layout/multiple-column_layout/index.html | 99 ++++------- .../fr/learn/css/css_layout/normal_flow/index.html | 32 ++-- .../fr/learn/css/css_layout/positioning/index.html | 197 ++++++++------------- .../css/css_layout/responsive_design/index.html | 92 +++++----- .../supporting_older_browsers/index.html | 4 +- 14 files changed, 467 insertions(+), 706 deletions(-) (limited to 'files/fr/learn/css/css_layout') diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html index a151a1da09..17a2d6e00f 100644 --- a/files/fr/learn/css/css_layout/flexbox/index.html +++ b/files/fr/learn/css/css_layout/flexbox/index.html @@ -20,13 +20,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
-

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

+

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

- +
- + @@ -37,7 +37,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

Pourquoi Flexbox ?

-

Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

+

Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :

@@ -49,13 +49,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

-

Voici un exemple simple

+

Voici un exemple simple

Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — flexbox0.html de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le voir en direct ici aussi.

Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.

-

Échantillon d'utilisation de flexbox

+

Échantillon d'utilisation de flexbox

Détermination des éléments à disposer en boîtes flexibles

@@ -67,19 +67,19 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox

Voici le résultat :

-

Échantillon d'utilisation de flexbox

+

Échantillon d'utilisation de flexbox

Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.

-

Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

+

Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

-

Aparté sur le modèle flex

+

Aparté sur le modèle flex

Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

-

Terminologie pour les boîtes modulables

+

Terminologie pour les boîtes modulables

-
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Flex Layout Three

Il y a deux éléments dans le HTML ci-dessous, une div avec une classe .parent qui contient une autre div avec une classe .child. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.

-

A box centered inside another box.

+

A box centered inside another box.

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

-
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Flex Layout Four

@@ -69,14 +69,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills

Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.
 

-

A set of items displayed as rows.

+

A set of items displayed as rows.

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}

-
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Assessment or further help

diff --git a/files/fr/learn/css/css_layout/floats/index.html b/files/fr/learn/css/css_layout/floats/index.html index ffcc762cea..386185ea62 100644 --- a/files/fr/learn/css/css_layout/floats/index.html +++ b/files/fr/learn/css/css_layout/floats/index.html @@ -20,9 +20,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
-

À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.

+

À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.

-
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :
+
@@ -37,9 +37,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

Contexte de boîtes flottantes

-

La propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.

+

La propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.

-

Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

+

Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.

@@ -51,11 +51,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

Tout d'abord, commençons  avec un HTML simple — ajoutez le code ci-dessous dans l'élément body en supprimant tout ce qu'il y avait avant :

- - 
<h1>Exemple simple de boîte flottante</h1>
 
-<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille">
+<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille">
 
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
@@ -92,11 +90,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats
 
 
Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:

 
-

-
-

 
-
{{ EmbedLiveSample('Float_1', '100%', 500) }}

+
{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}

 
 
Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété float (l'élément box dans notre cas) est retiré du cours normal de  la mise en page du document et collé du côté gauche (left) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.

 
@@ -142,13 +138,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats
 }
-

Pour mieux visualiser l'effet, modifiez margin-right de la boîte flottante en margin de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :

+

Visualiser le flottement

-
- -
-

{{ EmbedLiveSample('Float_2', '100%', 500) }}

+

{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}

Les lignes du paragraphe  suivant la boîte flottante  ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.

@@ -199,10 +191,6 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } -
- -
-

{{ EmbedLiveSample('Float_3', '100%', 600) }}

+

{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}

Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété  clear accepte les valeurs suivantes :

@@ -267,13 +253,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; } -

Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.

+

Le problème

-
- -
-

{{ EmbedLiveSample('Float_4', '100%', 600) }}

+

{{ EmbedLiveSample('Le_problème', '100%', 600) }}

Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.

@@ -328,11 +310,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats

Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <div> en dessous avec la règle clear: both.

-
- -
-

{{ EmbedLiveSample('Float_5', '100%', 600) }}

+

{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}

Utilisation du débordement

@@ -389,11 +365,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats overflow: auto; } -
- -
-

{{ EmbedLiveSample('Float_6', '100%', 600) }}

+

{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}

Cet exemple fonctionne en créant ce que l'on appelle un block formatting context (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.

@@ -445,11 +415,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: flow-root; } -
- -
-

{{ EmbedLiveSample('Float_7', '100%', 600) }}

+

{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}

Résumé

-

Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les Méthodes anciennes de mise en page pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.

+

Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les Méthodes anciennes de mise en page pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

Dans ce module

diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html index 05f16693ae..3694a00968 100644 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -6,77 +6,77 @@ original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension ---
{{LearnSidebar}}
-

Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.

+

Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.

-
Prérequis :
+
- - + + - - + +
Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.
Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.
-

dossier de projet

+

dossier de projet

-

Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.

+

Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.

-

+

-

configuration de base

+

configuration de base

-

Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

+

Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

-

Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.

+

Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.

-

Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.

+

Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.

-

+

-

Votre section detâches

+

Votre section de tâches

-

Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

+

Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

-
    -
  1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
    2. -
  2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
    3. -
  3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
    4. -
  4. Les éléments <article>et <aside>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
    5. -
  5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
    6. +
      +
    1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
      2. +
    2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
      3. +
    3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
      4. +
    4. Les éléments <article>et <aside>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
      5. +
    5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
    -

    Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

    +

    Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

    -