aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/css_columns/handling_overflow_in_multicol
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/css_columns/handling_overflow_in_multicol
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip
convert content to md
Diffstat (limited to 'files/fr/web/css/css_columns/handling_overflow_in_multicol')
-rw-r--r--files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md42
1 files changed, 20 insertions, 22 deletions
diff --git a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md
index e37d560b61..ccd8a2d25b 100644
--- a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md
+++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md
@@ -7,44 +7,42 @@ tags:
translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p>Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p>
+Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.
-<h2 id="Le_dépassement_dans_les_boîtes_des_colonnes">Le dépassement dans les boîtes des colonnes</h2>
+## Le dépassement dans les boîtes des colonnes
-<p>On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de <code>column-width</code> ou à la largeur des colonnes selon le nombre indiqué avec <code>column-count</code>.</p>
+On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de `column-width` ou à la largeur des colonnes selon le nombre indiqué avec `column-count`.
-<p>Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).</p>
+Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).
-<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}
-<p><img alt="" src="image-overflow-multicol.png"></p>
+![](image-overflow-multicol.png)
-<p>Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et <code>max-width: 100%</code> pour y parvenir.</p>
+Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et `max-width: 100%` pour y parvenir.
-<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}
-<h2 id="Plus_de_colonnes_que_d'espace_disponible">Plus de colonnes que d'espace disponible</h2>
+## Plus de colonnes que d'espace disponible
-<p>La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?</p>
+La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?
-<p>Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.</p>
+Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.
-<p>Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.</p>
+Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.
-<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}
-<div class="note">
-<p><strong>Note :</strong> On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).</p>
-</div>
+> **Note :** On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).
-<h2 id="Utiliser_les_requêtes_média_verticales">Utiliser les requêtes média verticales</h2>
+## Utiliser les requêtes média verticales
-<p>Lorsque les colonnes sont plus hautes que la zone d'affichage (<em>viewport</em>), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.</p>
+Lorsque les colonnes sont plus hautes que la zone d'affichage (_viewport_), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.
-<p>Dans l'exemple qui suit, on utilise par exemple une requête média avec <code>min-height</code> pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.</p>
+Dans l'exemple qui suit, on utilise par exemple une requête média avec `min-height` pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.
-<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}
-<p>Dans le dernier guide de cette série, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation</a> et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.</p>
+Dans le dernier guide de cette série, nous verrons [comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation](/fr/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol) et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.