diff options
Diffstat (limited to 'files/fr/learn/css/building_blocks/box_model_tasks/index.md')
| -rw-r--r-- | files/fr/learn/css/building_blocks/box_model_tasks/index.md | 91 |
1 files changed, 39 insertions, 52 deletions
diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.md b/files/fr/learn/css/building_blocks/box_model_tasks/index.md index 0d4034be70..715db21d91 100644 --- a/files/fr/learn/css/building_blocks/box_model_tasks/index.md +++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.md @@ -6,80 +6,67 @@ tags: - CSS translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.</p> +L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices.</p> -<p>Si vous bloquez, demandez-nous de l'aide : voir la section <a href="#assessment_or_further_help">Évaluation et aide</a> en bas de cette page.</p> -</div> +> **Note :** Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/) pour travailler sur les exercices. +> +> Si vous bloquez, demandez-nous de l'aide : voir la section [Évaluation et aide](#assessment_or_further_help) en bas de cette page. -<h2 id="the_box_model_one">Modèle de boîte : numéro 1</h2> +## Modèle de boîte : numéro 1 -<p>Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous :</p> +Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous : -<p><img alt="Deux boîtes de la même taille" src="mdn-box-model1.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}} -<div class="note"> -<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> -</div> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="the_box_model_two">Modèle de boîte : numéro 2</h2> +## Modèle de boîte : numéro 2 -<p>Dans cet exercice, ajoutez à la boîte :</p> +Dans cet exercice, ajoutez à la boîte : -<ul> - <li>une bordure pointillée, noire, de 5px d'épaisseur ;</li> - <li>une marge supérieure de 20px ;</li> - <li>une marge à droite de 1em ;</li> - <li>une marge inférieure de 40px ;</li> - <li>une marge gauche de 2em ;</li> - <li>un espace intérieur sur tous les côtés de 1em.</li> -</ul> +- une bordure pointillée, noire, de 5px d'épaisseur ; +- une marge supérieure de 20px ; +- une marge à droite de 1em ; +- une marge inférieure de 40px ; +- une marge gauche de 2em ; +- un espace intérieur sur tous les côtés de 1em. -<p><img alt="Une boîte avec une bordure pointillée" src="mdn-box-model2.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}} -<div class="note"> -<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> -</div> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="the_box_model_three">Modèle de boîte : numéro 3</h2> +## Modèle de boîte : numéro 3 -<p>Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?</p> +Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ? -<p><img alt="Une boîte en ligne avec un espace entre elle et le texte qui l'entoure" src="mdn-box-model3.png"></p> + -<p>Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :</p> +Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé : -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}} -<div class="note"> -<p><strong>Note :</strong> Pour obtenir une évaluation ou aller plus loin dans votre travail, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">téléchargez le code de départ pour cet exercice</a> pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.</p> -</div> +> **Note :** Pour obtenir une évaluation ou aller plus loin dans votre travail, [téléchargez le code de départ pour cet exercice](https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html) pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne. -<h2 id="assessment_or_further_help">Évaluation et aide</h2> +## Évaluation et aide -<p>Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.</p> +Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page. -<p>Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :</p> +Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide : -<ol> - <li>Enregistrez votre travail dans un éditeur en ligne partageable, du type <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">JSFiddle</a> ou <a href="https://glitch.com/">Glitch</a>. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.</li> - <li>Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie <a href="https://discourse.mozilla.org/c/mdn/learn">"Apprentissage" (Learning) du forum Discourse de MDN</a>. Votre message doit inclure : - <ul> - <li>Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".</li> - <li>Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.</li> - <li>Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code!</li> - <li>Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.</li> - </ul> - </li> -</ol> +1. Enregistrez votre travail dans un éditeur en ligne partageable, du type [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/) ou [Glitch](https://glitch.com/). Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus. +2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie ["Apprentissage" (Learning) du forum Discourse de MDN](https://discourse.mozilla.org/c/mdn/learn). Votre message doit inclure : + + - Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1". + - Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail. + - Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code! + - Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide. |