diff options
Diffstat (limited to 'files/fr/learn/css/css_layout/introduction/index.html')
| -rw-r--r-- | files/fr/learn/css/css_layout/introduction/index.html | 153 |
1 files changed, 51 insertions, 102 deletions
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> |