diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-14 14:23:22 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-14 14:23:22 +0100 |
| commit | d596e86a4f13b04981f51d327af257b07e6d21c3 (patch) | |
| tree | 63473f4c84b99e13d900cdab5e5a844a1c359476 /files/fr/learn/css/css_layout | |
| parent | 55e694eab2e70941e979c2839aaca5c9ef8f3226 (diff) | |
| download | translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.gz translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.bz2 translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.zip | |
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
Diffstat (limited to 'files/fr/learn/css/css_layout')
14 files changed, 467 insertions, 706 deletions
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 <div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">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.</p> +<p>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.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> + <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -37,7 +37,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <h2 id="Pourquoi_Flexbox">Pourquoi Flexbox ?</h2> -<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p> +<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p> <p>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 :</p> @@ -49,13 +49,13 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !</p> -<h2 id="Voici_un_exemple_simple"><span>Voici un exemple simple</span></h2> +<h2 id="Voici_un_exemple_simple">Voici un exemple simple</h2> <p>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 — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> 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 <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">voir en direct ici</a> aussi.</p> <p>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.</p> -<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p> +<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> <h2 id="Détermination_des_éléments_à_disposer_en_boîtes_flexibles">Détermination des éléments à disposer en boîtes flexibles</h2> @@ -67,19 +67,19 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Voici le résultat :</p> -<p><img alt="Échantillon d'utilisation de flexbox" src="https://mdn.mozillademos.org/files/16097/Exemple_flexbox_1.png" style="border-style: solid; border-width: 1px; display: block; height: 575px; margin: 0px auto; width: 994px;"></p> +<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> <p>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.</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi définir une valeur <code>inline-flex</code> pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p> +<p><strong>Note :</strong> Vous pouvez aussi définir une valeur <code>inline-flex</code> pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p> </div> -<h2 id="Aparté_sur_le_modèle_flex"><span>Aparté sur le modèle flex</span></h2> +<h2 id="Aparté_sur_le_modèle_flex">Aparté sur le modèle flex</h2> <p>Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :</p> -<p><img alt="Terminologie pour les boîtes modulables" class="default internal" src="https://mdn.mozillademos.org/files/16096/termes_flex.png" style="display: block; height: 333px; margin: 0px auto; width: 563px;"></p> +<p><img alt="Terminologie pour les boîtes modulables" src="termes_flex.png"></p> <ul> <li>L'<strong>axe principal</strong> <strong>(main axis) </strong>est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'<strong>origine principale</strong> <strong>(main start) </strong>et la <strong>fin principale (main end)</strong>.</li> @@ -101,14 +101,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.</p> <div class="note"> -<p><strong>Note </strong>: Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p> +<p><strong>Note :</strong> Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p> </div> <h2 id="Enveloppement">Enveloppement</h2> <p>Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>, essayez <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">directement</a> (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :</p> -<p><img alt="Débordement des éléments modulables" src="https://mdn.mozillademos.org/files/16098/Exemple_flexbox_2.png" style="display: block; height: 663px; margin: 0px auto; width: 933px;"></p> +<p><img alt="Débordement des éléments modulables" src="Exemple_flexbox_2.png"></p> <p>Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour <code>section</code> :</p> @@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox <p>Essayons ; la disposition est bien meilleure avec cet ajout :</p> -<p><img alt="Conditionnement des éléments modulables" src="https://mdn.mozillademos.org/files/16099/Exemple_flexbox_3.png" style="display: block; height: 918px; margin: 0px auto; width: 933px;">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p> +<p><img alt="Conditionnement des éléments modulables" src="Exemple_flexbox_3.png">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p> <p>Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en <code>row-reverse</code> — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.</p> @@ -165,7 +165,7 @@ article:nth-of-type(3) { <p>Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.</p> -<p><img alt="Modulation de la largeur" src="https://mdn.mozillademos.org/files/16100/Exemple_flexbox_4.png" style="border-style: solid; border-width: 1px; display: block; height: 484px; margin: 0px auto; width: 1001px;"></p> +<p><img alt="Modulation de la largeur" src="Exemple_flexbox_4.png"></p> <p>Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.</p> @@ -185,7 +185,7 @@ article:nth-of-type(3) { <p>Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">voir aussi en direct</a>). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.</p> -<p><img alt="Alignement" src="https://mdn.mozillademos.org/files/16101/Exemple_flexbox_5.png" style="display: block; height: 105px; margin: 0px auto; width: 960px;"></p> +<p><img alt="Alignement" src="Exemple_flexbox_5.png"></p> <p>D'abord, faites une copie locale de cet exemple.</p> @@ -256,7 +256,7 @@ article:nth-of-type(3) { <p>Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">à voir en direct également</a>).</p> -<p><img alt="Imbrications avec flexbox" src="https://mdn.mozillademos.org/files/16102/Exemple_flexbox_6.png" style="border-style: solid; border-width: 1px; display: block; height: 559px; margin: 0px auto; width: 1003px;"></p> +<p><img alt="Imbrications avec flexbox" src="Exemple_flexbox_6.png"></p> <p>Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}} :</p> @@ -316,7 +316,7 @@ article:nth-of-type(3) { <p>Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.</p> -<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p> +<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p> <h2 id="Résumé">Résumé</h2> @@ -328,15 +328,15 @@ article:nth-of-type(3) { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> </div> diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.html b/files/fr/learn/css/css_layout/flexbox_skills/index.html index d46a7b5f55..4e473510b9 100644 --- a/files/fr/learn/css/css_layout/flexbox_skills/index.html +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.html @@ -10,8 +10,8 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> +<div class="note"> +<p><strong>Note :</strong> You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> <br> If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> </div> @@ -20,21 +20,21 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.</p> -<p><img alt="Flex items laid out as a row with space between them." src="https://mdn.mozillademos.org/files/16938/flex-task1.png" style="height: 135px; width: 1441px;"></p> +<p><img alt="Flex items laid out as a row with space between them." src="flex-task1.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Two">Flex Layout Two</h2> <p>Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.</p> -<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="https://mdn.mozillademos.org/files/16939/flex-task2.png" style="height: 586px; width: 1424px;"></p> +<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="flex-task2.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> @@ -46,22 +46,22 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <li>Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?</li> </ul> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Three">Flex Layout Three</h2> <p>Il y a deux éléments dans le HTML ci-dessous, une div avec une classe <code>.parent</code> qui contient une autre div avec une classe <code>.child</code>. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.</p> -<p><img alt="A box centered inside another box." src="https://mdn.mozillademos.org/files/16940/flex-task3.png" style="height: 632px; width: 840px;"></p> +<p><img alt="A box centered inside another box." src="flex-task3.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Flex_Layout_Four">Flex Layout Four</h2> @@ -69,14 +69,14 @@ original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills <p>Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.<br> </p> -<p><img alt="A set of items displayed as rows." src="https://mdn.mozillademos.org/files/16941/flex-task4.png" style="height: 445px; width: 942px;"></p> +<p><img alt="A set of items displayed as rows." src="flex-task4.png"></p> <p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> <p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}</p> -<div class="blockIndicator note"> -<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> +<div class="note"> +<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> </div> <h2 id="Assessment_or_further_help">Assessment or further help</h2> 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 <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> 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.</p> +<p>À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> 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.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -37,9 +37,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <h2 id="Contexte_de_boîtes_flottantes">Contexte de boîtes flottantes</h2> -<p>La propriété <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> 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.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> 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.</p> -<p>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 <code>float</code> s'est élargie. Notre <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> +<p>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 <code>float</code> s'est élargie. Notre <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> <p>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é.</p> @@ -51,11 +51,9 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément <code>body</code> en supprimant tout ce qu'il y avait avant :</p> - - <pre class="brush: html"><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 <p>Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:</p> -<div id="Float_1"> -<div class="hidden"> -<h6 id="Float_Example_1">Float Example 1</h6> +<h3>Faire flotter la boîte</h3> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<p>Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant <code>.box</code> :</p> + +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -124,10 +122,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}</p> <p>Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété <code>float</code> (l'élément <code>box</code> dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (<code>left</code>) 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.</p> @@ -142,13 +138,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } </pre> -<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> 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 :</p> +<h3>Visualiser le flottement</h3> -<div id="Float_2"> -<div class="hidden"> -<h6 id="Float_Example_2">Float Example 2</h6> +<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> 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 :</p> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -181,10 +175,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}</p> <p>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.</p> @@ -199,10 +191,6 @@ original_slug: Apprendre/CSS/CSS_layout/Floats } </pre> -<div id="Float_3"> -<div class="hidden"> -<h6 id="Float_Example_3">Float Example 3</h6> - <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> <div class="box">Boîte flottante</div> @@ -235,10 +223,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats clear: left; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}</p> <p>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é <code>clear</code> accepte les valeurs suivantes :</p> @@ -267,13 +253,11 @@ original_slug: Apprendre/CSS/CSS_layout/Floats color: #fff; }</pre> -<p>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.</p> +<h3>Le problème</h3> -<div id="Float_4"> -<div class="hidden"> -<h6 id="Float_Example_4">Float Example 4</h6> +<p>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.</p> -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -307,10 +291,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Le_problème', '100%', 600) }}</p> <p>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.</p> @@ -328,11 +310,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats <p>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 <code><div></code> en dessous avec la règle <code>clear: both</code>.</p> -<div id="Float_5"> -<div class="hidden"> -<h6 id="Float_Example_5">Float Example 5</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -371,10 +349,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: block; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}</p> <h3 id="Utilisation_du_débordement">Utilisation du débordement</h3> @@ -389,11 +365,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats overflow: auto; }</pre> -<div id="Float_6"> -<div class="hidden"> -<h6 id="Float_Example_6">Float Example 6</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -427,10 +399,8 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}</p> <p>Cet exemple fonctionne en créant ce que l'on appelle un <strong>block formatting context</strong> (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.</p> @@ -445,11 +415,7 @@ original_slug: Apprendre/CSS/CSS_layout/Floats display: flow-root; }</pre> -<div id="Float_7"> -<div class="hidden"> -<h6 id="Float_Example_7">Float Example 7</h6> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> <div class="wrapper"> <div class="box">Boîte flottante</div> @@ -483,28 +449,26 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 1em; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}</p> <h2 id="Résumé">Résumé</h2> -<p>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 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> 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.</p> +<p>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 <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> 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.</p> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> 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 --- <div>{{LearnSidebar}}</div> -<p class="summary"><font>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.<span> </span></font><font>Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</font></p> +<p>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.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> - <th scope="row"><strong style="">Conditions préalables</strong>:</th> - <td><span style="">Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</span></td> + <th scope="row"><strong>Conditions préalables</strong>:</th> + <td>Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</td> </tr> <tr> - <th scope="row"><strong style="">Objectif</strong>:</th> - <td><span style="">Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</span></td> + <th scope="row"><strong>Objectif</strong>:</th> + <td>Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</td> </tr> </tbody> </table> -<h2 id="dossier_de_projet"><font><font>dossier de projet</font></font></h2> +<h2 id="dossier_de_projet">dossier de projet</h2> -<p><span style="">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.</span></p> +<p>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.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p> +<p><img alt="" src="layout-task-complete.png"></p> -<h3 id="configuration_de_base"><font><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font>configuration de base</font></span></font></h3> +<h3 id="configuration_de_base">configuration de base</h3> -<p style=""><font><font>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images<span> </span></font></font><a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension" rel="noopener" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none; white-space: pre-line;"><font><font>ici</font></font></a><font><font><span> </span>.</font></font></p> +<p>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ici</a> .</p> -<p style=""><font><font>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>images</code><font><font>.<span> </span></font><font>Ouvrir le<span> </span></font></font><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'>index.html</code><font><font>fichier 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.</font></font></p> +<p>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé <code>images</code>. Ouvrir le <code>index.html</code>fichier 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.</p> -<p style=""><font><font>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.</font></font></p> +<p>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.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p> +<p><img alt="" src="layout-task-start.png"></p> -<h3 id="Votre_section_detâches"><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font><font>Votre<span> </span></font></font></span><font><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension#Your_tasks" style="margin: 0px; padding: 0px; border: 0px; color: inherit; text-decoration: none;"><span><font>section de</font></span></a><span class="highlight-span" style="background-color: #333333; border: 0px; color: #ffffff; font-weight: 400; line-height: 1.25; margin: 0px; padding: 0px 4px 0px 40px;"><font>tâches</font></span></font></h3> +<h3 id="Votre_section_detâches">Votre section de tâches</h3> -<p style=""><font><font>Vous devez maintenant implémenter votre mise en page.<span> </span></font><font>Les tâches que vous devez accomplir sont:</font></font></p> +<p>Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:</p> -<ol style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>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.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Les<span> </span></font><font>éléments<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;" title="L'élément HTML <article> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, en syndication)."><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><article></code></a><font><font>et<span> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;" title="L'élément HTML <apartement> représente une partie d'un document dont le contenu est uniquement indirectement lié au contenu principal du document."><code style='margin: 0px; padding: 0px 2px; border: 0px; font-style: inherit; font-weight: inherit; background-color: rgba(220, 220, 220, 0.5); border-radius: 2px; font-family: consolas, "Liberation Mono", courier, monospace;'><aside></code></a><font><font>doivent s'afficher sous la forme d'une disposition à deux colonnes.<span> </span></font><font>La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</font></font></li> +<ol> + <li>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</li> + <li>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.</li> + <li>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</li> + <li>Les éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>et <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>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.</li> + <li>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</li> </ol> -<p style=""><font><font>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</font></font></p> +<p>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</p> -<ul style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Positionnement</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Flotte</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>Flexbox</font></font></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><font><font>CSS Grid Layout</font></font></li> +<ul> + <li>Positionnement</li> + <li>Flotte</li> + <li>Flexbox</li> + <li>CSS Grid Layout</li> </ul> -<p style=""><font><font>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses.<span> </span></font><font>Essayez différentes approches et voyez laquelle fonctionne le mieux.<span> </span></font><font>Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le<span> </span></font></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>canal</font></font></a><font><font><span> </span>IRC<span> </span></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font>#mdn</font></a><font><span> </span>.</font></font></p> +<p>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> .</p> <h2 id="Evaluation">Evaluation</h2> -<p><font><font>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige.<span> </span></font><font>Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le<span> </span></font></font><a class="external external-icon" href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener" style=""><font><font>fil de discussion relatif à cet exercice</font></font></a><font><font><span> </span>ou sur le<span> </span></font></font><a href="irc://irc.mozilla.org/mdn" style=""><font><font>canal</font></font></a><font><font><span> </span>IRC<span> </span></font><a href="irc://irc.mozilla.org/mdn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font>#mdn</font></a><font><span> </span>sur<span> </span></font></font><a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener" style=""><font><font>Mozilla IRC</font></font></a><font><font><span> </span>.<span> </span></font><font>Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</font></font></p> - -<h2 id="Dans_ce_module_Section" style=""><font><font>Dans ce module<span> </span></font></font><a class="local-anchor" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension#In_this_module" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><span><font><font>Section</font></font></span></a></h2> - -<ul style=""> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Introduction à la mise en page CSS</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Débit normal</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Flexbox</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>la grille</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Flotteurs</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Positionnement</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Mise en page à plusieurs colonnes</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Conception sensible</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Guide du débutant aux questions des médias</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Méthodes de mise en page héritées</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Soutenir les anciens navigateurs</font></font></a></li> - <li style="margin: 0px 0px 6px; padding: 0px; border: 0px;"><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension" style="margin: 0px; padding: 0px; border: 0px; color: rgb(61, 126, 154); text-decoration: none;"><font><font>Évaluation fondamentale de la compréhension de la mise en page.</font></font></a></li> +<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le <a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener">fil de discussion relatif à cet exercice</a> ou sur le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</p> + +<h2 id="Dans_ce_module_Section">Dans ce module Section</h2> + +<ul> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Débit normal</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">la grille</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flotteurs</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mise en page à plusieurs colonnes</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception sensible</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant aux questions des médias</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page héritées</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Soutenir les anciens navigateurs</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation fondamentale de la compréhension de la mise en page.</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/grids/index.html b/files/fr/learn/css/css_layout/grids/index.html index 272858a9e8..6a0d5da4ad 100644 --- a/files/fr/learn/css/css_layout/grids/index.html +++ b/files/fr/learn/css/css_layout/grids/index.html @@ -22,13 +22,13 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p> +<p>« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> + <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -43,7 +43,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>La trame est constituée généralement de <strong>rangées</strong> (<strong>colonnes</strong> ou <strong>lignes)</strong>. L'espace entre chaque ligne ou colonne est communément appelé <strong>gouttière</strong>.</p> -<p><img alt="Schéma du quadrillage" src="https://mdn.mozillademos.org/files/16104/grille.png" style="display: block; height: 346px; margin: 0px auto; width: 747px;"></p> +<p><img alt="Schéma du quadrillage" src="grille.png"></p> <h2 id="Création_dune_trame_CSS">Création d'une trame CSS</h2> @@ -70,11 +70,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.</p> -<div id="Grid_1"> -<div class="hidden"> -<h6 id="Simple_Grid_Example">Simple Grid Example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -88,7 +84,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids border: 2px solid rgb(79,185,227); } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -102,10 +98,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids display: grid; grid-template-columns: 200px 200px 200px; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}</p> <h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3> @@ -127,11 +121,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>La première chaîne obtient <code>2fr</code> de l'espace disponible et les deux autres <code>1fr</code> ; la première chaîne sera plus large. Il est possible de mélanger des unités <code>fr</code> et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.</p> -<div id="Grid_2"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -151,7 +141,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -160,13 +150,11 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Six</div> <div>Sept</div> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p> +<p><strong>Note :</strong> L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p> </div> <h3 id="Espaces_entre_pistes">Espaces entre pistes</h3> @@ -181,11 +169,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité <code>fr</code>.</p> -<div id="Grid_3"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -222,7 +206,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p> +<p><strong>Note :</strong> Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p> </div> <pre class="brush: css">.container { @@ -250,11 +234,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Par défaut, les rangées de la trame implicite sont <code>auto</code> dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété <code>grid-auto-rows</code> avec une valeur de <code>100px</code> dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.</p> -<div id="Grid_4"> -<div class="hidden"> -<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -268,7 +248,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids border: 2px solid rgb(79,185,227); } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -278,7 +258,6 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Sept</div> </div> </pre> -</div> <pre class="brush: css">.container { display: grid; @@ -286,9 +265,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-auto-rows: 100px; grid-gap: 20px; }</pre> -</div> -<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}</p> <h3 id="La_fonction_minmax">La fonction minmax()</h3> @@ -311,11 +289,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p> -<div id="Grid_5"> -<div class="hidden"> -<h6 id="As_many_columns_as_will_fit">As many columns as will fit</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -330,7 +304,7 @@ original_slug: Apprendre/CSS/CSS_layout/Grids } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div>Un</div> <div>Deux</div> <div>Trois</div> @@ -339,7 +313,6 @@ original_slug: Apprendre/CSS/CSS_layout/Grids <div>Six</div> <div>Sept</div> </div> </pre> -</div> <pre class="brush: css">.container { display: grid; @@ -347,9 +320,8 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-auto-rows: minmax(100px, auto); grid-gap: 20px; }</pre> -</div> -<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}</p> <p>Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.</p> @@ -399,11 +371,7 @@ footer { grid-row: 3; }</pre> -<div id="Grid_6"> -<div class="hidden"> -<h6 id="Line-based_placement">Line-based placement</h6> - -<pre class="brush: css"> body { +<pre class="brush: css hidden"> body { width: 90%; max-width: 900px; margin: 2em auto; @@ -448,8 +416,8 @@ aside { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>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> @@ -462,13 +430,11 @@ aside { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}</p> <div class="note"> -<p><strong>Note </strong>: vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p> +<p><strong>Note :</strong> vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p> </div> <h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2> @@ -505,11 +471,8 @@ footer { <p>Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !</p> -<div id="Grid_7"> -<div class="hidden"> -<h6 id="Line-based_placement_2">Line-based placement</h6> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -555,8 +518,8 @@ footer { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>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> @@ -569,10 +532,8 @@ footer { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}</p> <p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p> @@ -612,11 +573,7 @@ footer { grid-row: 3; }</pre> -<div id="Grid_8"> -<div class="hidden"> -<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -662,8 +619,8 @@ aside { } </pre> -<pre class="brush: html"><div class="container"> - <header><span>Voici mon joli blog</span></header> +<pre class="brush: html hidden"><div class="container"> + <header>Voici mon joli blog</header> <article> <h1>Mon article</h1> <p>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> @@ -676,14 +633,12 @@ aside { </aside> <footer>Contactez moi@monsite.com</footer> </div> </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}</p> -<p>Si vous utilisez <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p> +<p>Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p> -<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16109/trames.png" style="height: 677px; width: 1363px;"></p> +<p><img alt="A 12 column grid overlaid on our design." src="trames.png"></p> <h2 id="Résumé">Résumé</h2> @@ -692,8 +647,8 @@ aside { <h2 id="Voir_également">Voir également</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> + <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> </ul> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> @@ -703,14 +658,14 @@ aside { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/index.html b/files/fr/learn/css/css_layout/index.html index fac781b37b..b6b10499ce 100644 --- a/files/fr/learn/css/css_layout/index.html +++ b/files/fr/learn/css/css_layout/index.html @@ -22,12 +22,12 @@ original_slug: Apprendre/CSS/CSS_layout --- <div>{{LearnSidebar}}</div> -<p class="summary">À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p> +<p>À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p> <div class="callout"> - <h4 id="Looking_to_become_a_front-end_web_developer">Vous cherchez à devenir développeuse ou développeur web front-end ?</h4> + <p>Vous cherchez à devenir développeuse ou développeur web front-end ?</p> <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - <p><a class="button primary" href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> + <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> </p> </div> @@ -42,8 +42,7 @@ original_slug: Apprendre/CSS/CSS_layout </ol> <div class="notecard note"> - <p><b>Note :</b></p> - <p>Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p> + <p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p> </div> <h2 id="guides">Guides</h2> diff --git a/files/fr/learn/css/css_layout/introduction/index.html b/files/fr/learn/css/css_layout/introduction/index.html index 61936d08b4..c295efa170 100644 --- a/files/fr/learn/css/css_layout/introduction/index.html +++ b/files/fr/learn/css/css_layout/introduction/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div>{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}</div> -<p class="summary">Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p> +<p>Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -74,7 +74,7 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Les éléments disposés en empilement sont désignés comme étant des éléments <em>blocs</em>, par opposition aux éléments <em>en ligne</em> qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.</p> <div class="note"> -<p><strong>Note</strong>: « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p> +<p><strong>Note :</strong> « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p> </div> <p>Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.</p> @@ -82,11 +82,11 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :</p> <ul> - <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> + <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> <li><strong>Flotteurs</strong> — appliquer à {{cssxref("float")}} une valeur comme <code>left</code> peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.</li> <li><strong>La propriété {{cssxref("position")}}</strong> — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. <code>static</code> est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.</li> <li><strong>Mise en page de tableaux</strong> — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant <code>display: table</code> et les propriétés associées.</li> - <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li> + <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="/fr/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li> </ul> <h2 id="La_propriété_«_display_»">La propriété « display »</h2> @@ -99,17 +99,15 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <h2 id="Flexbox">Flexbox</h2> -<p>Flexbox est l'abréviation pour <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p> +<p>Flexbox est l'abréviation pour <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p> <p>Le balisage HTML ci-dessous crée un élément conteneur de la classe <code>wrapper</code>, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.</p> -<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p> +<h3>Utiliser display: flex</h3> -<div id="Flex_1"> -<div class="hidden"> -<h6 id="Flexbox_Exemple_1">Flexbox Exemple 1</h6> +<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p> -<pre class="brush: css">* {box-sizing: border-box;} +<pre class="brush: css hidden">* {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -117,7 +115,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: flex; @@ -130,19 +127,16 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box3">Trois</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> +<p>{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}</p> + +<h3>Définir la propriété flex</h3> <p>En plus des propriétés ci-dessus applicables au conteneur <code>flex</code>, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.</p> <p>À titre d'exemple, nous pouvons donner la valeur <code>1</code> à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.</p> -<div id="Flex_2"> -<div class="hidden"> -<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> - -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -150,7 +144,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: flex; @@ -167,12 +160,11 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box3">Trois</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> +<p>{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}</p> <div class="note"> -<p><strong>Note </strong>: Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> +<p><strong>Note :</strong> Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> </div> <h2 id="Disposition_en_trame">Disposition en trame</h2> @@ -181,11 +173,9 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à <code>display</code> — <code>display: grid</code>. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre <code>display: grid</code>, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de <code>1fr</code> chacune et deux lignes de <code>100px</code>. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.</p> -<div id="Grid_1"> -<div class="hidden"> -<h6 id="Grid_example_1">Grid example 1</h6> +<h3>Utiliser display: grid</h3> -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -193,7 +183,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -212,17 +201,14 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <div class="box6">Six</div> </div> </pre> -</div> -<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> +<p>{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}</p> -<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p> +<h3>Placer des objets sur la grille</h3> -<div id="Grid_2"> -<div class="hidden"> -<h6 id="Grid_example_2">Grid example 2</h6> +<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p> -<pre class="brush: css"> * {box-sizing: border-box;} +<pre class="brush: css hidden"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -230,7 +216,6 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction padding: 1em; } </pre> -</div> <pre class="brush: css">.wrapper { display: grid; @@ -263,10 +248,10 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction </pre> </div> -<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> +<p>{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}</p> <div class="note"> -<p><strong>Note </strong>: Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> +<p><strong>Note :</strong> Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> </div> <p>La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.</p> @@ -286,11 +271,7 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction <p>Dans l'exemple ci‑dessous nous faisons flotter un élément <code><div></code> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.</p> -<div id="Float_1"> -<div class="hidden"> -<h6 id="Floats_example">Floats example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -308,7 +289,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> @@ -326,12 +306,11 @@ p { margin-right: 30px; } </pre> -</div> -<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }}</p> <div class="note"> -<p><strong>Note </strong>: Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p> +<p><strong>Note :</strong> Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p> </div> <h2 id="Techniques_de_positionnement">Techniques de positionnement</h2> @@ -394,17 +373,13 @@ p { <p>Ajouter ce code donne le résultat suivant :</p> -<div id="Relative_1"> -<div class="hidden"> -<h6 id="Relative_positioning_example">Relative positioning example</h6> - -<pre class="brush: html"><h1>Positionnement relatif</h1> +<pre class="brush: html hidden"><h1>Positionnement relatif</h1> <p>Je suis un élément de niveau bloc de base.</p> <p class="positioned">Voici un élément avec un positionnement relatif.</p> <p>Je suis un élément de niveau bloc de base.</p></pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -417,7 +392,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: css">.positioned { position: relative; @@ -426,9 +400,8 @@ p { top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}</p> <h3 id="Positionnement_absolu">Positionnement absolu</h3> @@ -444,17 +417,13 @@ p { <p>Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur <code>absolute</code> et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :</p> -<div id="Absolute_1"> -<div class="hidden"> -<h6 id="Absolute_positioning_example">Absolute positioning example</h6> - -<pre class="brush: html"><h1>Positionnement absolu</h1> +<pre class="brush: html hidden"><h1>Positionnement absolu</h1> <p>Je suis un élément de niveau bloc de base.</p> <p class="positioned">Voici un élément avec un positionnement absolu.</p> <p>Je suis un élément de niveau bloc de base.</p></pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -467,7 +436,6 @@ p { border-radius: 5px; } </pre> -</div> <pre class="brush: css">.positioned { position: absolute; @@ -476,11 +444,10 @@ p { top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}</p> -<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> +<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> <h3 id="Positionnement_fixé">Positionnement fixé</h3> @@ -497,11 +464,7 @@ p { <p>Paragraphe 3.</p> </pre> -<div id="Fixed_1"> -<div class="hidden"> -<h6 id="Fixed_positioning_example">Fixed positioning example</h6> - -<pre class="brush: html"><h1>Positionnement fixé</h1> +<pre class="brush: html hidden"><h1>Positionnement fixé</h1> <div class="positioned">Fixé</div> @@ -513,7 +476,7 @@ p { </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -525,26 +488,20 @@ p { margin: 10px; border-radius: 5px; }</pre> -</div> <pre class="brush: css">.positioned { position: fixed; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}</p> <h3 id="Positionnement_collant">Positionnement collant</h3> <p>Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété <code>position: sticky</code>, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si <code>position: fixed</code> lui était appliqué.</p> -<div id="Sticky_1"> -<div class="hidden"> -<h6 id="Sticky_positioning_example">Sticky positioning example</h6> - -<pre class="brush: html"><h1>Positionnement collant</h1> +<pre class="brush: html hidden"><h1>Positionnement collant</h1> <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> @@ -554,7 +511,7 @@ p { <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> </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -566,19 +523,17 @@ p { margin: 10px; border-radius: 5px; }</pre> -</div> <pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}</p> <div class="note"> -<p><strong>Note </strong>: pour plus de précisions à propos du positionnement, voir l'article <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p> +<p><strong>Note :</strong> pour plus de précisions à propos du positionnement, voir l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p> </div> <h2 id="Les_tableaux_CSS">Les tableaux CSS</h2> @@ -670,11 +625,7 @@ form p { <p>Noux utilisons une propriété <code>column-width</code> de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.</p> -<div id="Multicol_1"> -<div class="hidden"> -<h6 id="Multicol_example">Multicol example</h6> - -<pre class="brush: html"> <div class="container"> +<pre class="brush: html hidden"> <div class="container"> <h2>Disposition en colonnes</h2> <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> @@ -685,15 +636,13 @@ form p { </div> </pre> -<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> -</div> +<pre class="brush: css hidden">body { max-width: 800px; margin: 0 auto; } </pre> <pre class="brush: css"> .container { column-width: 200px; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}</p> <h2 id="Résumé">Résumé</h2> @@ -706,12 +655,12 @@ form p { <ul> <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">La mise en page avec les CSS</a></li> <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html index f4777dd68d..e78ffa385a 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> -<p class="summary">Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p> +<p>Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -93,11 +93,9 @@ div:nth-of-type(2) { <p>En mettant tout ensemble, voici le résultat :</p> -<div id="Floated_Two_Col"> -<div class="hidden"> -<h6 id="Simple_two-column_layout">Simple two-column layout</h6> +<h3>Exemple complet</h3> -<pre class="brush: html"><h1>Exemple de disposition sur 2 colonnes</h1> +<pre class="brush: html hidden"><h1>Exemple de disposition sur 2 colonnes</h1> <div> <h2>Première colonne</h2> @@ -110,7 +108,7 @@ div:nth-of-type(2) { </div> </pre> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -126,20 +124,18 @@ div:nth-of-type(2) { float: right; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}</p> +<p>{{ EmbedLiveSample('Exemple_complet', '100%', 520) }}</p> <p>Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une <strong>disposition fluide</strong>, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.</p> <div class="note"> -<p><strong>Note</strong> : Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p> +<p><strong>Note :</strong> Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p> </div> <h2 id="Ancienne_création_d'un_cadre_de_trames">Ancienne création d'un cadre de trames</h2> -<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p> +<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p> <p>Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.</p> @@ -176,7 +172,7 @@ div:nth-of-type(2) { <p>Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> +<p><img alt="" src="simple-grid-finished.png"></p> <p>À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à <code>border-box</code> sur tous les éléments du site (voir <a href="/fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte">Modification totale du modèle de boîte</a> pour plus d'explications).</p> @@ -217,7 +213,7 @@ body { <p>La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.</p> <div class="note"> -<p><strong>Note</strong> : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p> +<p><strong>Note :</strong> Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p> </div> <p>Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.</p> @@ -242,7 +238,7 @@ body { <p>Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.</p> <div class="note"> -<p><strong>Note </strong>: Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p> +<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p> </div> <p>Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :</p> @@ -323,12 +319,12 @@ body { <p>Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.</p> <div class="note"> -<p><strong>Note</strong> : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p> +<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p> </div> <h3 id="Faciliter_les_calculs_avec_la_fonction_calc()">Faciliter les calculs avec la fonction calc()</h3> -<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p> +<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p> <p>Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction <code>calc()</code> nous permet de faire ce calcul dans la valeur <code>width</code> même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :</p> @@ -351,11 +347,11 @@ body { .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> <div class="note"> -<p><strong>Note </strong>: Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p> +<p><strong>Note :</strong> Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p> </div> <div class="note"> -<p><strong>Note </strong>: Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p> +<p><strong>Note :</strong> Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p> </div> <h3 id="Systèmes_de_trames_«_sémantiques_»_vs._«_non_sémantiques_»">Systèmes de trames « sémantiques » vs. « non sémantiques »</h3> @@ -369,7 +365,7 @@ body { }</pre> <div class="note"> -<p><strong>Note </strong>: Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p> +<p><strong>Note :</strong> Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p> </div> <h3 id="Décalage_du_conteneur_d'une_trame">Décalage du conteneur d'une trame</h3> @@ -401,15 +397,15 @@ body { <pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> <div class="note"> -<p><strong>Note</strong> : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p> +<p><strong>Note :</strong> Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p> </div> <p>Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> (voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">l'exécution directement</a>). L'exemple terminé doit ressembler à ceci :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> +<p><img alt="" src="offset-grid-finished.png"></p> <div class="note"> -<p><strong>Note </strong>: Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p> +<p><strong>Note :</strong> Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p> </div> <h3 id="Limitations_des_trames_de_boîtes_flottantes">Limitations des trames de boîtes flottantes</h3> @@ -457,7 +453,7 @@ body { <p>Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> +<p><img alt="" src="flexbox-grid-incomplete.png"></p> <p>Pour corriger cela, nous avons encore besoin d'inclure les classes <code>span</code> pour donner une largeur qui remplave la valeur donnée par <code>flex-basis</code> pour cet élément.</p> @@ -485,7 +481,7 @@ body { <p>Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.</p> <div class="note"> -<p><strong>Note</strong> : <a href="/en-US/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p> +<p><strong>Note :</strong> <a href="/fr/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p> </div> <p>Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :</p> @@ -553,7 +549,7 @@ body { <p>Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.</p> <div class="note"> -<p><strong>Note </strong>: Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p> +<p><strong>Note :</strong> Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p> </div> <p>Si vous regardez dans le fichier <em>skeleton.css</em> vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.</p> @@ -573,14 +569,14 @@ body { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/media_queries/index.html b/files/fr/learn/css/css_layout/media_queries/index.html index 552d1982df..f629d17eb3 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.html +++ b/files/fr/learn/css/css_layout/media_queries/index.html @@ -8,11 +8,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> + <td>HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/fr/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> </tr> <tr> <th scope="row">Objective:</th> @@ -50,22 +50,22 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.</p> -<pre class="brush: css"><code>@media print { +<pre class="brush: css">@media print { body { font-size: 12pt; } -}</code></pre> +}</pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: the media type here is different from the so-called {{glossary("MIME type")}}.</p> +<div class="note"> +<p><strong>Note :</strong> the media type here is different from the so-called {{glossary("MIME type")}}.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> +<div class="note"> +<p><strong>Note :</strong> there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> +<div class="note"> +<p><strong>Note :</strong> Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> </div> <h3 id="Media_feature_rules">Media feature rules</h3> @@ -78,37 +78,37 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.</p> -<pre class="brush: css"><code>@media screen and (width: 600px) { +<pre class="brush: css">@media screen and (width: 600px) { body { color: red; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">view the source</a>.</p> <p>The <code>width</code> (and <code>height</code>) media features can be used as ranges, and therefore be prefixed with <code>min-</code> or <code>max-</code> to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use <code>max-width</code>:</p> -<pre class="brush: css"><code>@media screen and (max-width: 400px) { +<pre class="brush: css">@media screen and (max-width: 400px) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">view the source</a>.</p> <p>In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see <code>width</code> or <code>height</code> used alone.</p> -<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> +<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> <h4 id="Orientation">Orientation</h4> <p>One well-supported media feature is <code>orientation</code>, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.</p> -<pre class="brush: css"><code>@media (orientation: landscape) { +<pre class="brush: css">@media (orientation: landscape) { body { color: rebeccapurple; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">view the source</a>.</p> @@ -118,11 +118,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>As part of the Level 4 specification, the <code>hover</code> media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.</p> -<pre class="brush: css"><code>@media (hover: hover) { +<pre class="brush: css">@media (hover: hover) { body { color: rebeccapurple; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">view the source</a>.</p> @@ -140,11 +140,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>To combine media features you can use <code>and</code> in much the same way as we have used <code>and</code> above to combine a media type and feature. For example, we might want to test for a <code>min-width</code> and <code>orientation</code>. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.</p> -<pre class="brush: css"><code>@media screen and (min-width: 400px) and (orientation: landscape) { +<pre class="brush: css">@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">view the source</a>.</p> @@ -152,11 +152,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.</p> -<pre class="brush: css"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) { +<pre class="brush: css">@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">view the source</a>.</p> @@ -164,11 +164,11 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>You can negate an entire media query by using the <code>not</code> operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.</p> -<pre class="brush: css"><code>@media not all and (orientation: landscape) { +<pre class="brush: css">@media not all and (orientation: landscape) { body { color: blue; } -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">view the source</a>.</p> @@ -178,9 +178,9 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as <strong>breakpoints</strong>.</p> -<p>The <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> +<p>The <a href="/fr/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> -<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> +<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="rwd-mode.png"></p> <h2 id="Active_learning_mobile_first_responsive_design">Active learning: mobile first responsive design</h2> @@ -194,7 +194,7 @@ original_slug: Apprendre/CSS/CSS_layout/Media_queries <p>Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.</p> -<pre class="brush: css"><code>* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -244,11 +244,11 @@ nav a:hover { article { margin-bottom: 1em; } -</code></pre> +</pre> <p>We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.</p> -<pre class="brush: html"><code><body> +<pre class="brush: html"><body> <div class="wrapper"> <header> <nav> @@ -288,7 +288,7 @@ article { <footer><p>&copy;2019</p></footer> </div> </body> -</code></pre> +</pre> <p>This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.</p> @@ -300,7 +300,7 @@ article { <p><strong>Add the below code into the bottom of your step1.html CSS.</strong></p> -<pre class="brush: css"><code>@media screen and (min-width: 40em) { +<pre class="brush: css">@media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; @@ -315,7 +315,7 @@ article { flex: 1; } } -</code></pre> +</pre> <p>This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.</p> @@ -353,7 +353,7 @@ article { <p>This could be achieved using the following:</p> -<pre class="brush: html"><code><ul class="grid"> +<pre class="brush: html"><ul class="grid"> <li> <h2>Card 1</h2> <p>...</p> @@ -374,9 +374,9 @@ article { <h2>Card 5</h2> <p>...</p> </li> -</ul></code></pre> +</ul></pre> -<pre class="brush: css"><code>.grid { +<pre class="brush: css">.grid { list-style: none; margin: 0; padding: 0; @@ -388,7 +388,7 @@ article { .grid li { border: 1px solid #666; padding: 10px; -}</code></pre> +}</pre> <p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">Open the grid layout example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">view the source</a>.</p> @@ -396,7 +396,7 @@ article { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/fr/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> <h2 id="Summary">Summary</h2> @@ -411,16 +411,16 @@ article { <h2 id="In_this_module">In this module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html index 9d28e265de..248c788e2b 100644 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.html @@ -17,9 +17,9 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p> +<p>Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -47,18 +47,13 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.</p> -<div id="Multicol_1"> -<div class="hidden"> -<h6 id="column-count_example">column-count example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -</div> <pre class="brush: html"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> @@ -76,13 +71,9 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout </div> </pre> -<pre class="brush: css">.container { - column-count: 3; -} -</pre> -</div> +<p>{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}</p> -<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p> +<h3>Définir column-width</h3> <p>Modifiez la CSS pour utiliser <code>column-width</code> ainsi :</p> @@ -93,18 +84,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.</p> -<div id="Multicol_2"> -<div class="hidden"> -<h6 id="column-width_example">column-width example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; }</pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -118,15 +105,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div></pre> -</div> - -<pre class="brush: css">.container { - column-width: 200px; -} -</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Définir_column-width', '100%', 400) }}</p> <h2 id="Style_des_colonnes">Style des colonnes</h2> @@ -154,11 +134,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Ajoutons des règles pour les divers styles et couleurs.</p> -<div id="Multicol_3"> -<div class="hidden"> -<h6 id="Styling_the_columns">Styling the columns</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -170,7 +146,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout column-rule: 4px dotted rgb(79, 185, 227); }</pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <h1>Simple exemple <i>multicol</i></h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -184,10 +160,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div></pre> -</div> -</div> -<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}</p> <p>Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec <code>column-gap</code>. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.</p> @@ -197,11 +171,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé <em>multicol</em> pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.</p> -<div id="Multicol_4"> -<div class="hidden"> -<h6 id="Cards_example">Cards example</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -209,7 +179,7 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout } </pre> </div> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div class="card"> <h2>Je suis un titre</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -279,11 +249,12 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}</p> -<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p> +<h3>Utiliser break-inside</h3> + +<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p> <p>Il est également préférable d'ajouter l'ancienne propriété <code>page-break-inside: avoid</code> pour une meilleure prise en charge par les divers navigateurs.</p> @@ -299,18 +270,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <p>Actualisez la page et les boîtes devraient rester entières.</p> -<div id="Multicol_5"> -<div class="hidden"> -<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> - -<pre class="brush: css">body { +<pre class="brush: css hidden">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -<pre class="brush: html"><div class="container"> +<pre class="brush: html hidden"><div class="container"> <div class="card"> <h2>Je suis un titre</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -368,7 +335,6 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout </div> </pre> -</div> <pre class="brush: css">.container { column-width: 250px; @@ -383,9 +349,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; }</pre> -</div> -<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}</p> <h2 id="Résumé">Résumé</h2> @@ -394,8 +359,8 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li> </ul> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> @@ -403,14 +368,14 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/normal_flow/index.html b/files/fr/learn/css/css_layout/normal_flow/index.html index 00f1cc1882..b0edfa8415 100644 --- a/files/fr/learn/css/css_layout/normal_flow/index.html +++ b/files/fr/learn/css/css_layout/normal_flow/index.html @@ -8,9 +8,9 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}</p> -<p class="summary">Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p> +<p>Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -41,7 +41,8 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <p>Voici un exemple simple expliquant cela :</p> -<div id="Normal_Flow"> +<h3 id="Exemple">Exemple</h3> + <pre class="brush: html"><h2>Cours d'un document de base</h2> <p>Je suis un élément de niveau bloc de base. @@ -65,7 +66,7 @@ original_slug: Apprendre/CSS/CSS_layout/Normal_Flow <span>sont placés sur une nouvelle ligne si possible (comme celle‑ci contenant du texte)</span>, sinon ils sont placés sur une nouvelle ligne, comme cette image : - <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + <img src="long.jpg"></p></pre> <pre class="brush: css">body { width: 500px; @@ -83,9 +84,8 @@ span { background: white; border: 1px solid black; }</pre> -</div> -<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Exemple', '100%', 500) }}</p> <h2 id="Résumé">Résumé</h2> @@ -96,14 +96,14 @@ span { <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/positioning/index.html b/files/fr/learn/css/css_layout/positioning/index.html index c4a9c593b6..8485a78f70 100644 --- a/files/fr/learn/css/css_layout/positioning/index.html +++ b/files/fr/learn/css/css_layout/positioning/index.html @@ -22,9 +22,9 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> -<p class="summary">Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p> +<p>Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -51,25 +51,25 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <p>Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe <code>positioned</code> pour le deuxième {{htmlelement("p")}} dans le HTML:</p> -<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> +<pre class="brush: html"><p class="positioned"> ... </p></pre> <p>Puis ajoutez la règle suivante au bas de votre CSS:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: static; background: yellow; }</pre> <p>Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !</p> <div class="note"> -<p><strong>Remarque </strong>: ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p> +<p><strong>Note :</strong> ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p> </div> <h3 id="Positionnement_«_relative_»">Positionnement « relative »</h3> <p>Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de <code>position</code> dans le code :</p> -<pre class="brush: css notranslate">position: relative;</pre> +<pre class="brush: css">position: relative;</pre> <p>Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.</p> @@ -77,25 +77,23 @@ original_slug: Apprendre/CSS/CSS_layout/Le_positionnement <p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle <code>.positioned</code> dans la CSS :</p> -<pre class="notranslate">top: 30px; +<pre>top: 30px; left: 30px;</pre> <div class="note"> -<p><strong>Remarque </strong>: les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p> +<p><strong>Note :</strong> les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p> </div> <p>Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :</p> -<div id="example_1"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement relatif</h1> +<pre class="brush: html hidden"><h1>Positionnement relatif</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } p { @@ -111,35 +109,31 @@ span { background: yellow; top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_1', '100%', 500) }}</p> +<p>{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}</p> -<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela <span class="st">peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif</span>. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p> +<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p> <div class="note"> -<p><strong>Remarque</strong>: à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p> </div> <h3 id="Positionnement_«_absolute_»">Positionnement « absolute »</h3> <p>Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de <code>position</code> dans le code :</p> -<pre class="notranslate">position: absolute;</pre> +<pre>position: absolute;</pre> <p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :</p> -<div id="example_2"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement absolu</h1> +<pre class="brush: html hidden"><h1>Positionnement absolu</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } p { @@ -155,25 +149,23 @@ span { background: yellow; top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_2', '100%', 420) }}</p> +<p>{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}</p> -<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. <span class="st">Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste.</span> C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p> +<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p> -<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu <span class="st">de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant.</span> Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p> +<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p> <div class="note"> -<p><strong>Note</strong> : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p> +<p><strong>Note :</strong> vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p> </div> <div class="note"> -<p><strong>Note </strong>: Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p> +<p><strong>Note :</strong> Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p> </div> <div class="note"> -<p><strong>Note </strong>: à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p> </div> <h3 id="Contextes_de_positionnement">Contextes de positionnement</h3> @@ -182,21 +174,19 @@ span { <p>Nous pouvons changer ce <strong>contexte de positionnement</strong> — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:</p> -<pre class="notranslate">position: relative;</pre> +<pre>position: relative;</pre> <p>Cela devrait donner le résultat suivant:</p> -<div id="example_3"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Contextes de positionnement</h1> +<pre class="brush: html hidden"><h1>Contextes de positionnement</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&gt;</code> !</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; position: relative; @@ -220,15 +210,13 @@ span { top: 30px; left: 30px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_3','100%', 420) }}</p> +<p>{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}</p> -<p><span class="st">À présent, l</span>'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> +<p>À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> <div class="note"> -<p><strong>Note </strong>: à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p> +<p><strong>Note :</strong> à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p> </div> <h3 id="Présentation_du_z-index">Présentation du z-index</h3> @@ -237,7 +225,7 @@ span { <p>Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :</p> -<pre class="notranslate">p:nth-of-type(1) { +<pre>p:nth-of-type(1) { position: absolute; background: lime; top: 10px; @@ -252,22 +240,20 @@ span { <p>Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle <code>p:nth-of-type(1)</code> :</p> -<pre class="notranslate">z-index: 1;</pre> +<pre>z-index: 1;</pre> <p>Voici maintenant l'exemple terminé :</p> -<div id="example_4"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>z-index</h1> +<pre class="brush: html hidden"><h1>z-index</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&lt;html&gt;</code> !</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; position: relative; } @@ -291,15 +277,13 @@ p:nth-of-type(1) { right: 30px; z-index: 1; } </pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_4', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}</p> <p>Notez que <code>z-index</code> n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.</p> <div class="note"> -<p><strong>Note</strong> : sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p> +<p><strong>Note :</strong> sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p> </div> <h3 id="Positionnement_«_fixed_»">Positionnement « fixed »</h3> @@ -310,7 +294,7 @@ p:nth-of-type(1) { <p>Maintenant, mettez à jour la règle <code>body</code> : supprimez la déclaration <code>position : relative ;</code> et ajoutez une hauteur fixe, ainsi :</p> -<pre class="notranslate">body { +<pre>body { width: 500px; height: 1400px; margin: 0 auto; @@ -318,7 +302,7 @@ p:nth-of-type(1) { <p>Maintenant, donnez la position <code>fixed</code> à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :</p> -<pre class="notranslate">h1 { +<pre>h1 { position: fixed; top: 0; width: 500px; @@ -331,22 +315,20 @@ p:nth-of-type(1) { <p>Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :</p> -<pre class="notranslate">p:nth-of-type(1) { +<pre>p:nth-of-type(1) { margin-top: 60px; }</pre> <p>Voici l'exemple terminé :</p> -<div id="example_5"> -<div class="hidden"> -<pre class="brush: html notranslate"><h1>Positionnement fixe</h1> +<pre class="brush: html hidden"><h1>Positionnement fixe</h1> <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Je ne suis plus positionné...</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; height: 1400px; margin: 0 auto; @@ -376,24 +358,21 @@ h1 { p:nth-of-type(1) { margin-top: 60px; }</pre> -</div> -</div> -<p>{{ EmbedLiveSample('example_5', '100%', 400) }}</p> +<p>{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}</p> <div class="note"> -<p><strong>Note</strong> : à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p> </div> <h3 id="«_position_sticky_»">« position: sticky »</h3> <p>Il y a une autre valeur de positionnement disponible appelée <code>position : sticky</code>. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.</p> -<div id="Sticky_1"> -<div class="hidden"> -<h6 id="Exemple_de_positionnement_collant">Exemple de positionnement collant</h6> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> +<h4>Exemple simple</h4> + +<pre class="brush: html hidden"><h1>Positionnement collant</h1> <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> @@ -403,7 +382,7 @@ p:nth-of-type(1) { <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> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; margin: 0 auto; } @@ -415,20 +394,21 @@ p:nth-of-type(1) { margin: 10px; border-radius: 5px; }</pre> -</div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; }</pre> -</div> -<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<p>{{ EmbedLiveSample('Exemple_simple', '100%', 200) }}</p> + +<h4>Index déroulant</h4> <p>Une utilisation courante pleine d'intérêt de <code>position: sticky</code> permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :</p> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> +<pre class="brush: html"><h1>Positionnement collant</h1> <dl> <dt>A</dt> @@ -461,7 +441,7 @@ p:nth-of-type(1) { <p>Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute <code>position : sticky</code> à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.</p> -<pre class="brush: css notranslate">dt { +<pre class="brush: css">dt { background-color: black; color: white; padding: 10px; @@ -472,9 +452,7 @@ p:nth-of-type(1) { } </pre> -<div id="Sticky_2"> -<div class="hidden"> -<pre class="brush: css notranslate">body { +<pre class="brush: css hidden">body { width: 500px; height: 1400px; margin: 0 auto; @@ -491,43 +469,10 @@ dt { } </pre> -<pre class="brush: html notranslate"><h1>Positionnement collant</h1> - -<dl> -<dt>A</dt> -<dd>Abeille</dd> -<dd>Abricot</dd> -<dd>Altimètre</dd> -<dd>Avion</dd> -<dt>B</dt> -<dd>Banane</dd> -<dd>Betterave</dd> -<dd>Bœuf</dd> -<dd>Bouvreuil</dd> -<dd>Buzzard</dd> -<dt>C</dt> -<dd>Calculateur</dd> -<dd>Camera</dd> -<dd>Cane</dd> -<dd>Chameau</dd> -<dt>D</dt> -<dd>Dime</dd> -<dd>Dindon</dd> -<dd>Drapeau</dd> -<dd>Drone</dd> -<dt>E</dt> -<dd>Eau</dd> -<dd>Éléphant</dd> -<dd>Escadrille</dd> -</dl> -</pre> -</div> -</div> - -<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('Index_déroulant', '100%', 200) }}</p> <div class="note"> -<p><strong>Note </strong>: à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p> +<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p> </div> <h2 id="Résumé">Résumé</h2> @@ -540,20 +485,20 @@ dt { <ul> <li>Référence de la propriété {{cssxref("position")}}.</li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li> </ul> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> </ul> diff --git a/files/fr/learn/css/css_layout/responsive_design/index.html b/files/fr/learn/css/css_layout/responsive_design/index.html index 05df9cfd85..312eea3059 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.html +++ b/files/fr/learn/css/css_layout/responsive_design/index.html @@ -17,7 +17,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de <em>responsive web design</em> (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -41,26 +41,22 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.</p> -<figure><img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="mdn-rwd-liquid.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> </div> <p>Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.</p> -<figure><img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="mdn-rwd-fixed.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> </div> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> +<div class="note"> +<p><strong>Note :</strong> Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> </div> <p>Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.</p> @@ -69,7 +65,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <h2 id="Mise_en_page_flexible_avant_le_responsive_design">Mise en page flexible avant le responsive design</h2> -<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a> <sup>(EN)</sup>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> +<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> <p>Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.</p> @@ -93,7 +89,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur <code>.container</code> ne sera appliqué que si ces deux éléments sont vrais.</p> -<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { +<pre class="brush: css"><code>@media screen and (min-width: 800px) { .container { margin: 1em 2em; } @@ -114,12 +110,12 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser <a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">floats</a>. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.</p> -<pre class="notranslate"><code>target / context = result </code> +<pre><code>target / context = result </code> </pre> <p>Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.</p> -<pre class="brush: css notranslate"><code>.col { +<pre class="brush: css"><code>.col { width: 6.25%; /* 60 / 960 = 0.0625 */ } </code> </pre> @@ -129,36 +125,32 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :<br> </p> -<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="mdn-rwd-mobile.png"> <p>Sur des écrans plus larges, ils se positionnent sur deux colonnes :</p> -<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> -<figcaption></figcaption> -</figure> +<img alt="A desktop view of a layout with two columns." src="mdn-rwd-desktop.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> </div> <h2 id="Techniques_modernes_de_mise_en_page">Techniques modernes de mise en page</h2> -<p>Les méthodes de mise en page modernes telles que <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> +<p>Les méthodes de mise en page modernes telles que <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> <h3 id="Multicol">Multicol</h3> <p>La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un <code>column-count</code>, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-count: 3; } </code> </pre> <p>Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-width: 10em; } </code> </pre> @@ -169,7 +161,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation <code>flex: 1</code> comme décrit dans la rubrique de mise en page <a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex">Flexbox: Taille modulable des éléments flex</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: flex; } @@ -178,29 +170,29 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design } </code> </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> </div> <h3 id="CSS_grid">CSS grid</h3> <p>Dans la mise en page en grille CSS, l'unité <code>fr</code> permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de <code>1fr</code>. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section <a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité "fr"</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </code> </pre> -<div class="blockIndicator note"> -<p><strong>Note</strong>: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> </div> <h2 id="Images_responsives">Images responsives</h2> <p>L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :</p> -<pre class="brush: css notranslate"><code>img { +<pre class="brush: css"><code>img { max-width: 100%: } </code> </pre> @@ -211,7 +203,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.</p> -<p>Vous pouvez trouver un <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> +<p>Vous pouvez trouver un <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> <h2 id="Typographie_responsive">Typographie responsive</h2> @@ -219,7 +211,7 @@ original_slug: Apprendre/CSS/CSS_layout/Responsive_Design <p>Dans cet exemple, nous voulons fixer notre titre de niveau 1 à <code>4rem</code>, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins <code>1200px</code>.</p> -<pre class="brush: css notranslate"><code>html { +<pre class="brush: css"><code>html { font-size: 1em; } @@ -238,18 +230,14 @@ h1 { <p>Sur un mobile, le titre est plus petit :</p> -<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> -<figcaption></figcaption> -</figure> +<img alt="A stacked layout with a small heading size." src="mdn-rwd-font-mobile.png"> <p>Sur le bureau cependant, nous voyons la plus grande taille de titre :</p> -<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> -<figcaption></figcaption> -</figure> +<img alt="A two column layout with a large heading." src="mdn-rwd-font-desktop.png"> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> </div> <p>Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.</p> @@ -258,7 +246,7 @@ h1 { <p>Une approche intéressante consiste à utiliser l'unité viewport <code>vw</code> pour permettre une typographie réactive. <code>1vw</code> est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de <code>vw</code>, elle sera toujours liée à la taille de la fenêtre.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 6vw; }</pre> @@ -266,21 +254,21 @@ h1 { <p>Il existe une solution, et elle consiste à utiliser <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>. Si vous ajoutez l'unité <code>vw</code> à un ensemble de valeurs utilisant une taille fixe telle que <code>em</code>s ou <code>rem</code>s, le texte sera toujours zoomable. En fait, l'unité <code>vw</code> s'ajoute à cette valeur zoomée :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> <p>Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.</p> -<div class="blockIndicator note"> -<p>Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> </div> <h2 id="Le_méta-tag_du_viewport">Le méta-tag du viewport</h2> <p>Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <code><head></code> du document.</p> -<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> </pre> <p>Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.</p> @@ -305,8 +293,8 @@ h1 { <p>Vous devriez éviter d'utiliser <code>minimum-scale</code>, <code>maximum-scale</code>, et en particulier la définition de <code>user-scalable</code> sur <code>no</code>. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.</p> -<div class="blockIndicator note"> -<p><strong>Note</strong>: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> +<div class="note"> +<p><strong>Note :</strong> Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> </div> <h2 id="Sommaire">Sommaire</h2> diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html index b7eea3d877..1aeb151ae9 100644 --- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> -<p class="summary">Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p> +<p>Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> |