diff options
Diffstat (limited to 'files/fr/learn/css/css_layout/multiple-column_layout/index.html')
| -rw-r--r-- | files/fr/learn/css/css_layout/multiple-column_layout/index.html | 99 |
1 files changed, 32 insertions, 67 deletions
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> |