Complete fr translation for LA "Practical positioning examples" (#2703)

* Update index.html

* Finishing the translation for #2703

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 184 insertions, 154 deletions

diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.html b/files/fr/learn/css/css_layout/practical_positioning_examples/index.html
index e023fd3d4b..b496e93796 100644
--- a/files/fr/learn/css/css_layout/practical_positioning_examples/index.html
+++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.html
@@ -6,17 +6,16 @@ original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement
 ---
 <div>{{LearnSidebar}}</div>
 
-<p><br>
- Cet article montre comment construire quelques exemples réels de choses que vous pouvez faire avec le positionnement.</p>
+<p>Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement.</p>
 
-<table class="learn-box standard-table">
+<table class="standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis:</th>
-   <td>Les bases du HTML (étudier <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (étudier <a href="/fr/docs/Learn/CSS/First_steps">Introduction au CSS</a>.)</td>
+   <th scope="row">Prérequis&nbsp;:</th>
+   <td>Les fondamentaux en HTML (étudier <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Une introduction au HTML</a>), et une idée du fonctionnement du CSS (étudier <a href="/fr/docs/Learn/CSS/First_steps">Une introduction à CSS</a>.)</td>
   </tr>
   <tr>
-   <th scope="row">Objectif:</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Avoir une idée des aspects pratiques du positionnement</td>
   </tr>
  </tbody>
@@ -24,43 +23,44 @@ original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement
 
 <h2 id="Une_boîte_dinformation_à_onglets">Une boîte d'information à onglets</h2>
 
-<p>Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une fonction très courante utilisée lorsque vous voulez regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites Web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où vous pourriez vouloir rendre beaucoup d'informations disponibles sans qu'elles remplissent toute l'interface utilisateur. Notre exemple simple ressemblera à ceci une fois que nous aurons terminé :</p>
+<p>Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé&nbsp;:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+<p><img alt="" src="tabbed-info-box.png"></p>
 
 <div class="note">
-<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
+<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p>
 </div>
 
-<p>Vous pourriez vous dire "pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que les onglets permettent de cliquer sur les pages séparées pour créer l'effet ?" Ce code serait plus simple, oui, mais alors chaque "page" séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites " à page unique " deviennent très populaires - en particulier pour les interfaces Web mobiles - parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.</p>
+<p>On pourrait se demander&nbsp;: «&nbsp;pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet&nbsp;?&nbsp;». Ce code serait en effet plus simple, mais dans ce cas, chaque «&nbsp;page&nbsp;» séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites «&nbsp;à page unique&nbsp;» (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a JavaScript feature such as <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. At this point in your learning however we want to keep things as simple as possible. There is some JavaScript later on, but only a tiny bit.</p>
+<p><strong>Note :</strong> Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.</p>
 </div>
 
-<p>Pour commencer, nous aimerions que vous fassiez une copie locale du fichier HTML de départ — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le body:</p>
+<p>Pour commencer, effectuez une copie locale du fichier HTML de départ — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page :</p>
 
-<pre class="brush: html">&lt;section class="info-box"&gt;
+<pre class="brush: html">
+&lt;section class="info-box"&gt;
   &lt;ul&gt;
-    &lt;li&gt;&lt;a href="#" class="active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#" class="active"&gt;Onglet 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Onglet 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Onglet 3&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;div class="panels"&gt;
     &lt;article class="active-panel"&gt;
-      &lt;h2&gt;The first tab&lt;/h2&gt;
+      &lt;h2&gt;Premier onglet&lt;/h2&gt;
 
       &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.&lt;/p&gt;
     &lt;/article&gt;
     &lt;article&gt;
-      &lt;h2&gt;The second tab&lt;/h2&gt;
+      &lt;h2&gt;Deuxième onglet&lt;/h2&gt;
 
-      &lt;p&gt;This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.&lt;/p&gt;
+      &lt;p&gt;Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.&lt;/p&gt;
     &lt;/article&gt;
     &lt;article&gt;
-      &lt;h2&gt;The third tab&lt;/h2&gt;
+      &lt;h2&gt;Troisième onglet&lt;/h2&gt;
 
-      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!&lt;/p&gt;
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée&nbsp;!&lt;/p&gt;
 
       &lt;ol&gt;
         &lt;li&gt;dui neque eleifend lorem, a auctor libero turpis at sem.&lt;/li&gt;
@@ -69,17 +69,19 @@ original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement
       &lt;/ol&gt;
     &lt;/article&gt;
   &lt;/div&gt;
-&lt;/section&gt;</pre>
+&lt;/section&gt;
+</pre>
 
-<p>Nous avons un élément {{htmlelement("section")}}  avec une <code>class</code>  <code>info-box</code>, qui contient une {{htmlelement("ul")}} et une {{htmlelement("div")}}. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. la <code>div</code> contient trois éléments {{htmlelement("article")}} , qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.</p>
+<p>Nous avons un élément <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>  avec une <code>class</code>  <code>info-box</code>, qui contient un élément <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a> et un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément <code>div</code> contient trois éléments <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.</p>
 
-<p>L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'un onglet est pressé, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre quelques bases de JavaScript dès que possible - plus les fonctionnalités de votre interface utilisateur deviennent complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.</p>
+<p>L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre <a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">quelques bases de JavaScript</a> dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.</p>
 
-<h3 id="General_setup">General setup</h3>
+<h3 id="Configuration_générale">Configuration générale</h3>
 
-<p>To begin with, add the following between your opening and closing {{HTMLElement("style")}} tags:</p>
+<p>Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a> :</p>
 
-<pre class="brush: css">html {
+<pre class="brush: css">
+html {
   font-family: sans-serif;
 }
 
@@ -89,38 +91,43 @@ original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement
 
 body {
   margin: 0;
-}</pre>
+}
+</pre>
 
-<p>This is just some general setup to set a sans-serif font on our page, use the <code>border-box</code> {{cssxref("box-sizing")}} model, and get rid of the default {{htmlelement("body")}} margin.</p>
+<p>Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle <code>border-box</code> <a href="/fr/docs/Web/CSS/box-sizing"><code>box-sizing</code></a>, pour surcharger la marge par défaut de <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>.</p>
 
-<p>Next, add the following just below your previous CSS:</p>
+<p>Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent :</p>
 
-<pre class="brush: css">.info-box {
+<pre class="brush: css">
+.info-box {
   width: 450px;
   height: 400px;
   margin: 0 auto;
-}</pre>
+}
+</pre>
 
-<p>This sets a specific width and height on the content, and centers it on the screen using the old <code>margin: 0 auto</code> trick. Previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. It also looks a bit jarring to have different tabs at different heights.</p>
+<p>Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce <code>margin: 0 auto</code>. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs.</p>
 
-<h3 id="Styling_our_tabs">Styling our tabs</h3>
+<h3 id="Mettre_en_forme_les_onglets">Mettre en forme les onglets</h3>
 
-<p>Now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. First, add the following rule at the bottom of your CSS to remove the default {{cssxref("padding-left")}} and {{cssxref("margin-top")}} from the unordered list:</p>
+<p>On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a> et <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a> pour la liste non-ordonnée&nbsp;:</p>
 
-<pre class="brush: css">.info-box ul {
+<pre class="brush: css">
+.info-box ul {
   padding-left: 0;
   margin-top: 0;
 }</pre>
 
 <div class="note">
-<p><strong>Note</strong>: We are using descendant selectors with <code>.info-box</code> at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.</p>
+  <p><strong>Note :</strong> On utilise ici un sélecteur de descendants avec <code>.info-box</code> au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant.</p>
 </div>
 
-<p>Next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their {{cssxref("list-style-type")}} is set to <code>none</code> to get rid of the bullets, and their {{cssxref("width")}} is set to <code>150px</code> so they will comfortably fit across the info-box. The {{htmlelement("a")}} elements are set to {{cssxref("display")}} inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties.</p>
+<p>Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> est placée à <code>none</code> afin de ne plus avoir les puces et <a href="/fr/docs/Web/CSS/width"><code>width</code></a> vaut <code>150px</code> afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> ont <a href="/fr/docs/Web/CSS/display"><code>display</code></a> avec la valeur <code>inline-block</code> afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés.</p>
 
-<p>Add the following CSS:</p>
+<p>Ajoutez le fragment de CSS qui suit&nbsp;:</p>
 
-<pre class="brush: css">.info-box li {
+<pre class="brush: css">
+.info-box li {
   float: left;
   list-style-type: none;
   width: 150px;
@@ -134,11 +141,13 @@ body {
   background-color: red;
   color: black;
   text-align: center;
-}</pre>
+}
+</pre>
 
-<p>Finally for this section we'll set some styles on the link states. First, we'll set the <code>:focus</code> and <code>:hover</code> states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a <code>class</code> of <code>active</code> is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:</p>
+<p>Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états <code>:focus</code> et <code>:hover</code> afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut <code>class</code> avec la valeur <code>active</code> est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites&nbsp;:</p>
 
-<pre class="brush: css">.info-box li a:focus, .info-box li a:hover {
+<pre class="brush: css">
+.info-box li a:focus, .info-box li a:hover {
   background-color: #a60000;
   color: white;
 }
@@ -146,25 +155,29 @@ body {
 .info-box li a.active {
   background-color: #a60000;
   color: white;
-}</pre>
+}
+</pre>
 
-<h3 id="Styling_the_panels">Styling the panels</h3>
+<h3 id="Mettre_en_forme_les_panneaux">Mettre en forme les panneaux</h3>
 
-<p>The next job is to style our panels. Let's get going!</p>
+<p>La suite consiste à mettre en forme les panneaux de contenu. Allons-y&nbsp;!</p>
 
-<p>First, of all, add the following rule to style the <code>.panels</code> {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} <code>relative</code> to set the {{htmlelement("div")}} as the positioning context, so you can then place positioned child elements relative to it and not the {{htmlelement("html")}} element, and finally we {{cssxref("clear")}} the float set in the CSS above so that it doesn't interfere with the remainder of the layout.</p>
+<p>Pour commencer, ajoutez la règle suivante qui met en forme le conteneur <code>.panels</code> <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>. Ici, on définit une hauteur fixe avec <a href="/fr/docs/Web/CSS/height"><code>height</code></a> afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>relative</code> sur l'élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément <a href="/fr/docs/Web/HTML/Element/html"><code>&lt;html&gt;</code></a>) pour la mise en forme. Enfin, on utilise <a href="/fr/docs/Web/CSS/clear"><code>clear</code></a> pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition.</p>
 
-<pre class="brush: css">.info-box .panels {
+<pre class="brush: css">
+.info-box .panels {
   height: 352px;
   position: relative;
   clear: both;
-}</pre>
+}
+</pre>
 
-<p>Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}.</p>
+<p>Dans cette section, nous allons mettre en forme les éléments <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a> qui forment les panneaux. La première règle va fixer <a href="/fr/docs/Web/CSS/position"><code>position</code></a> absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> avec <a href="/fr/docs/Web/CSS/top"><code>top</code></a> et <a href="/fr/docs/Web/CSS/left"><code>left</code></a>. C'est la clé de cette disposition&nbsp;: ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte (<a href="/fr/docs/Web/CSS/color"><code>color</code></a>), ainsi qu'une couleur d'arrière-plan (<a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>).</p>
 
-<p>The second rule we'll add here makes it so that a panel with a <code>class</code> of <code>active-panel</code> set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a <code>z-index</code> of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.</p>
+<p>La deuxième règle ajoutée indique qu'un panneau avec une classe (<code>class</code>) valant <code>active-panel</code> aura une valeur de <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1&nbsp;: il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un <code>z-index</code> qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.</p>
 
-<pre class="brush: css">.info-box article {
+<pre class="brush: css">
+.info-box article {
   position: absolute;
   top: 0;
   left: 0;
@@ -176,151 +189,163 @@ body {
 
 .info-box .active-panel {
   z-index: 1;
-}</pre>
+}
+</pre>
 
-<h3 id="Adding_our_JavaScript">Adding our JavaScript</h3>
+<h3 id="Ajouter_notre_JavaScript">Ajouter notre JavaScript</h3>
 
-<p>The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content):</p>
+<p>La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> (elles se situent après le contenu HTML)&nbsp;:</p>
 
-<pre>var tabs = document.querySelectorAll('.info-box li a');
-var panels = document.querySelectorAll('.info-box article');
+<pre class="brush: js">
+let tabs = document.querySelectorAll('.info-box li a');
+let panels = document.querySelectorAll('.info-box article');
 
-for(i = 0; i &lt; tabs.length; i++) {
-  var tab = tabs[i];
+for(let i = 0; i &lt; tabs.length; i++) {
+  let tab = tabs[i];
   setTabHandler(tab, i);
 }
 
 function setTabHandler(tab, tabPos) {
   tab.onclick = function() {
-    for(i = 0; i &lt; tabs.length; i++) {
+    for(let i = 0; i &lt; tabs.length; i++) {
       tabs[i].className = '';
     }
 
     tab.className = 'active';
 
-    for(i = 0; i &lt; panels.length; i++) {
+    for(let i = 0; i &lt; panels.length; i++) {
       panels[i].className = '';
     }
 
     panels[tabPos].className = 'active-panel';
   }
-}</pre>
+}
+</pre>
 
-<p>This code does the following:</p>
+<p>Ce code effectue les actions suivantes&nbsp;:</p>
 
 <ul>
- <li>First we save a reference to all the tabs and all the panels in two variables called <code>tabs</code> and <code>panels</code>, so we can easily do things to them later on.</li>
- <li>Then we use a <code>for</code> loop to cycle through all the tabs and run a function called <code>setTabHandler()</code> on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number <code>i</code> that indentifies the tab's position in the <code>tabs</code> array.</li>
- <li>In the <code>setTabHandler()</code> function, the tab has an <code>onclick</code> event handler set on it, so that when the tab is clicked, the following occurs:
+ <li>Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées <code>tabs</code> et <code>panels</code> afin qu'on puisse facilement les manipuler par la suite.</li>
+ <li>Ensuite, on utilise une boucle <code>for</code> pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée <code>setTabHandler()</code> qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice <code>i</code> qui identifie la position de l'onglet dans le tableau <code>tabs</code>.</li>
+ <li>Dans la fonction <code>setTabHandler()</code>, l'onglet se voit affecter un gestionnaire d'évènement <code>onclick</code>. Ainsi dès qu'on clique sur un onglet, on a&nbsp;:
   <ul>
-   <li>A <code>for</code> loop is used to cycle through all the tabs and remove any classes that are present on them.</li>
-   <li>A <code>class</code> of <code>active</code> is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.</li>
-   <li>A <code>for</code> loop is used to cycle through all the panels and remove any classes that are present on them.</li>
-   <li>A class of <code>active-panel</code> is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.</li>
+   <li>Une boucle <code>for</code> qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux.</li>
+   <li>Une classe (<code>class</code>) <code>active</code> qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit <a href="/fr/docs/Web/CSS/color"><code>color</code></a> et <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur l'onglet afin que celles-ci correspondent aux couleurs du panneau.</li>
+   <li>Une boucle <code>for</code> qui parcourt tous les panneaux afin de retirer toute classe qui serait présente sur eux.</li>
+   <li>Une classe <code>active-panel</code> qui est appliquée sur le panneau correspondant à l'onglet. Cela permet d'appliquer la règle CSS vue plus haut qui définit <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1, afin de faire apparaître ce panneau par-dessus les autres.</li>
   </ul>
  </li>
 </ul>
 
-<p>That's it for the first example. Keep your code open, as we'll be adding to it in the second one.</p>
+<p>Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple.</p>
 
-<h2 id="A_fixed_position_tabbed_info-box">A fixed position tabbed info-box</h2>
+<h2 id="Une_boîte_d'information_à_onglets_avec_une_position_fixe">Une boîte d'information à onglets avec une position fixe</h2>
 
-<p>In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:</p>
+<p>Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à&nbsp;:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p>
+<p><img alt="" src="fixed-info-box.png"></p>
 
 <div class="note">
-<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
+<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p>
 </div>
 
-<p>As a starting point, you can use your completed example from the first section of the article, or make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> from our Github repo.</p>
+<p>Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> depuis le dépôt GitHub.</p>
 
-<h3 id="HTML_additions">HTML additions</h3>
+<h3 id="Ajouts_au_HTML">Ajouts au HTML</h3>
 
-<p>First of all, we need some additional HTML to represent the web site main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section:</p>
+<p>Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section  (<a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>) suivante juste après la balise ouvrante <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a> et avant la section existante&nbsp;:</p>
 
-<pre class="brush: html">&lt;section class="fake-content"&gt;
-  &lt;h1&gt;Fake content&lt;/h1&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-&lt;/section&gt;</pre>
+<pre class="brush: html">
+&lt;section class="fake-content"&gt;
+  &lt;h1&gt;Faux contenu&lt;/h1&gt;
+  &lt;p&gt;Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.&lt;/p&gt;
+  &lt;p&gt;Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.&lt;/p&gt;
+  &lt;p&gt;Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.&lt;/p&gt;
+  &lt;p&gt;Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.&lt;/p&gt;
+  &lt;p&gt;Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.&lt;/p&gt;
+  &lt;p&gt;Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.&lt;/p&gt;
+  &lt;p&gt;Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.&lt;/p&gt;
+  &lt;p&gt;Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.&lt;/p&gt;
+&lt;/section&gt;
+</pre>
 
 <div class="note">
-<p><strong>Note</strong>: You can feel free to change the fake content for some real content if you like.</p>
+<p><strong>Note :</strong> N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.</p>
 </div>
 
-<h3 id="Changes_to_the_existing_CSS">Changes to the existing CSS</h3>
+<h3 id="Modifications_au_CSS_existant">Modifications au CSS existant</h3>
 
-<p>Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your <code>.info-box</code> rule to get rid of <code>margin: 0 auto;</code> (we no longer want the info-box centered), add {{cssxref("position")}}<code>: fixed;</code>, and stick it to the {{cssxref("top")}} of the browser viewport.</p>
+<p>Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant <code>.info-box</code> afin de se débarrasser de <code>margin: 0 auto;</code> (on ne veut plus que la boîte soit centrée) et d'ajouter <a href="/fr/docs/Web/CSS/position"><code>position</code></a><code>: fixed;</code> avant de l'attacher au haut de la zone d'affichage du navigateur avec <a href="/fr/docs/Web/CSS/top"><code>top</code></a>.</p>
 
-<p>It should now look like this:</p>
+<p>Voici ce à quoi ça devrait ressembler&nbsp;:</p>
 
-<pre class="brush: css">.info-box {
+<pre class="brush: css">
+.info-box {
   width: 450px;
   height: 400px;
   position: fixed;
   top: 0;
-}</pre>
+}
+</pre>
 
-<h3 id="Styling_the_main_content">Styling the main content</h3>
+<h3 id="Mettre_en_forme_le_contenu_principal">Mettre en forme le contenu principal</h3>
 
-<p>The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:</p>
+<p>Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant&nbsp;:</p>
 
-<pre class="brush: css">.fake-content {
+<pre class="brush: css">
+.fake-content {
   background-color: #a60000;
   color: white;
   padding: 10px;
   height: 2000px;
   margin-left: 470px;
-}</pre>
+}
+</pre>
 
-<p>To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.</p>
+<p>Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>, <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, et le même remplissage (<a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante (<a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a>) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste.</p>
 
-<p>This marks the end of the second example; we hope you'll find the third just as interesting.</p>
+<p>Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile.</p>
 
-<h2 id="A_sliding_hidden_panel">A sliding hidden panel</h2>
+<h2 id="Un_panneau_glissant_masqué">Un panneau glissant masqué</h2>
 
-<p>The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.</p>
+<p>Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en «&nbsp;glissant&nbsp;» de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile.</p>
 
-<p>Our finished example will look like this:</p>
+<p>Voilà ce à quoi ressemblera notre exemple terminé&nbsp;:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p>
+<p><img alt="" src="hidden-sliding-panel.png"></p>
 
 <div class="note">
-<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
+<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p>
 </div>
 
-<p>As a starting point, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:</p>
+<p>Pour commencer, enregistrez le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier&nbsp;:</p>
 
-<pre class="brush: css">&lt;label for="toggle"&gt;❔&lt;/label&gt;
+<pre class="brush: html">
+&lt;label for="toggle"&gt;❔&lt;/label&gt;
 &lt;input type="checkbox" id="toggle"&gt;
 &lt;aside&gt;
 
   ...
 
-&lt;/aside&gt;</pre>
+&lt;/aside&gt;
+</pre>
 
-<p>To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — <code>&lt;label&gt;</code> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the <code>&lt;input&gt;</code> checkbox using the <code>for</code> and <code>id</code> attributes.</p>
+<p>Pour commencer, nous avons un élément <a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a> et un élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>. Les éléments <code>&lt;label&gt;</code> sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher <code>&lt;input&gt;</code> grâce aux attributs <code>for</code> et <code>id</code>.</p>
 
 <div class="note">
-<p><strong>Note</strong>: We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.</p>
+<p><strong>Note :</strong> Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information&nbsp;: il représente le bouton qu'on utilisera pour afficher/masquer le panneau.</p>
 </div>
 
-<p>Here we are going to use these elements for a slightly different purpose — another useful side effect of <code>&lt;label&gt;</code> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the {{htmlelement("aside")}} element that follows the other two (we've left its contents out of the above code listing for brevity).</p>
+<p>Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments <code>&lt;label&gt;</code> est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse <a href="https://css-tricks.com/the-checkbox-hack/">bidouille de la case à cocher</a> qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément <a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a> qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).</p>
 
-<p>In the below sections we'll explain how this all works.</p>
+<p>Dans les sections qui suivent, nous expliquerons comment cela fonctionne.</p>
 
-<h3 id="Styling_the_form_elements">Styling the form elements</h3>
+<h3 id="Mettre_en_forme_les_éléments_de_formulaire">Mettre en forme les éléments de formulaire</h3>
 
-<p>First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:</p>
+<p>Commençons par les éléments de formulaire&nbsp;: ajoutez le CSS qui suit entre les balises <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a>&nbsp;:</p>
 
-<pre class="brush: css">label[for="toggle"] {
+<pre class="brush: css">
+label[for="toggle"] {
   font-size: 3rem;
   position: absolute;
   top: 4px;
@@ -332,24 +357,26 @@ function setTabHandler(tab, tabPos) {
 input[type="checkbox"] {
   position: absolute;
   top: -100px;
-}</pre>
+}
+</pre>
 
-<p>The first rule styles the <code>&lt;label&gt;</code>; here we've:</p>
+<p>La première règle met en forme <code>&lt;label&gt;</code>, on y trouve&nbsp;:</p>
 
 <ul>
- <li>Set a large {{cssxref("font-size")}} to make the icon nice and big.</li>
- <li>Set {{cssxref("position")}} <code>absolute</code> on it, and used {{cssxref("top")}} and {{cssxref("right")}} to position it nicely in the top-right corner.</li>
- <li>Set a {{cssxref("z-index")}} of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to hide the info pane.</li>
- <li>Used the {{cssxref("cursor")}} property to change the mouse cursor when it is hovering over the icon to a hand pointer (like the one you see when links are hovered over), as an extra visual clue to users that the icon does something interesting.</li>
+ <li>Une taille de police (<a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a>) élevée afin que l'icône soit bien visible.</li>
+ <li>Une <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>absolute</code> avec des définitions pour <a href="/fr/docs/Web/CSS/top"><code>top</code></a> et <a href="/fr/docs/Web/CSS/right"><code>right</code></a> qui permettent de positionner l'icône dans le coin supérieur droit.</li>
+ <li>Une définition de <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1 afin que, lorsque le panneau d'information est montré, il ne recouvre pas l'icône mais que celle-ci soit toujours affichée afin de pouvoir l'utiliser pour masquer le panneau d'information.</li>
+ <li>Une propriété <a href="/fr/docs/Web/CSS/cursor"><code>cursor</code></a> pour changer le curseur de la souris au survol de l'icône afin que le curseur prenne la forme d'une main (la même que celle utilisée par défaut au survol des liens). Cela fournit une indication visuelle supplémentaire comme quoi l'icône fait quelque chose d'intéressant.</li>
 </ul>
 
-<p>The second rule sets {{cssxref("position")}} <code>absolute</code> on the actual checkbox <code>&lt;input&gt;</code> element, and hides it off the top of the screen. We don't actually want to see this on our UI.</p>
+<p>La deuxième règle applique <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>absolute</code> sur la case à cocher <code>&lt;input&gt;</code> et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur.</p>
 
-<h3 id="Styling_the_panel">Styling the panel</h3>
+<h3 id="Mettre_en_forme_le_panneau">Mettre en forme le panneau</h3>
 
-<p>Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:</p>
+<p>Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS&nbsp;:</p>
 
-<pre class="brush: css">aside {
+<pre class="brush: css">
+aside {
   background-color: #a60000;
   color: white;
 
@@ -362,47 +389,50 @@ input[type="checkbox"] {
   right: -370px;
 
   transition: 0.6s all;
-}</pre>
+}
+</pre>
 
-<p>There's a lot going on here — let's discuss it bit by bit:</p>
+<p>Il y a plusieurs déclarations ici, voyons-les au fur et à mesure&nbsp;:</p>
 
 <ul>
- <li>First, we set some simple {{cssxref("background-color")}} and {{cssxref("color")}} on the info box.</li>
- <li>Next, we set a fixed {{cssxref("width")}} on the panel, and make its {{cssxref("height")}} the entire height of the browser viewport.</li>
- <li>We also include some horizontal {{cssxref("padding")}} to space it out a bit.</li>
- <li>Next we set {{cssxref("position")}}<code>: fixed;</code> on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the {{cssxref("top")}} of the viewport, and set it so that by default it is offscreen to the {{cssxref("right")}}.</li>
- <li>Finally, we set a {{cssxref("transition")}} on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the <code>&lt;label&gt;</code> will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...</li>
+ <li>Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> et <a href="/fr/docs/Web/CSS/color"><code>color</code></a>.</li>
+ <li>Ensuite, on définit une largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) fixe sur le panneau et on définit la hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) afin que celle-ci occupe la hauteur de toute la zone d'affichage.</li>
+ <li>On ajoute également du remplissage (<a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>) horizontal pour espacer légèrement.</li>
+ <li>Ensuite, on utilise <a href="/fr/docs/Web/CSS/position"><code>position</code></a><code>: fixed;</code> sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut (<a href="/fr/docs/Web/CSS/top"><code>top</code></a>) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite (<a href="/fr/docs/Web/CSS/right"><code>right</code></a>) et en dehors de l'écran.</li>
+ <li>Enfin, on applique une <a href="/fr/docs/Web/CSS/transition"><code>transition</code></a> sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre «&nbsp;actif&nbsp;» et «&nbsp;inactif&nbsp;». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran.</li>
 </ul>
 
-<h3 id="Setting_the_checked_state">Setting the checked state</h3>
+<h3 id="Définir_l'état_coché">Définir l'état coché</h3>
 
-<p>There is one final bit of CSS to add — put the following at the bottom of your CSS:</p>
+<p>Voici le dernier fragment de CSS à ajouter, là encore à la fin&nbsp;:</p>
 
-<pre class="brush: css">input[type=checkbox]:checked + aside {
+<pre class="brush: css">
+input[type=checkbox]:checked + aside {
   right: 0px;
-}</pre>
+}
+</pre>
 
-<p>The selector is pretty complex here — we are selecting the <code>&lt;aside&gt;</code> element adjacent to the <code>&lt;input&gt;</code> element, but only when it is checked (note the use of the {{cssxref(":checked")}} pseudo-class to achieve this). When this is the case, we are setting the {{cssxref("right")}} property of the <code>&lt;aside&gt;</code> to <code>0px</code>, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.</p>
+<p>Le sélecteur utilisé ici est plutôt complexe&nbsp;: on sélectionne l'élément <code>&lt;aside&gt;</code> adjacent à l'élément <code>&lt;input&gt;</code>, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe <a href="/fr/docs/Web/CSS/:checked"><code>:checked</code></a>). Lorsque c'est le cas, on définit la propriété <a href="/fr/docs/Web/CSS/right"><code>right</code></a> de l'élément <code>&lt;aside&gt;</code> à <code>0px</code>, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau.</p>
 
-<p>So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.</p>
+<p>Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal&nbsp;: les éléments de formulaire n'ont pas été conçus pour ça&nbsp;; l'accessibilité n'est pas au rendez-vous non plus&nbsp;: le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter.</p>
 
-<h2 id="Summary">Summary</h2>
+<h2 id="Résumé">Résumé</h2>
 
-<p>So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to build some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.</p>
+<p>Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées <i lang="en">flexbox</i>.</p>
 
-<h2 id="In_this_module">In this module</h2>
+<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/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 aux dispositions CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Boîtes flexibles (flexbox)</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flottements</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">Disposition à plusieurs colonnes</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception adaptative (<i lang="en">responsive design</i>)</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide sur les requêtes de média (<i lang="en">media queries</i>)</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de disposition historiques</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prendre en charge les anciens navigateurs</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation pour la compréhension des fondamentaux des dispositions CSS</a></li>
 </ul>