From 53b1549611de84b513ffd8e6cf44f2aff5a71302 Mon Sep 17 00:00:00 2001 From: jfalycee Date: Thu, 11 Nov 2021 18:07:13 +0100 Subject: Complete fr translation for LA "Practical positioning examples" (#2703) * Update index.html * Finishing the translation for #2703 Co-authored-by: julieng --- .../practical_positioning_examples/index.html | 338 +++++++++++---------- 1 file 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 ---
{{LearnSidebar}}
-


- Cet article montre comment construire quelques exemples réels de choses que vous pouvez faire avec le positionnement.

+

Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement.

- +
- - + + - + @@ -24,43 +23,44 @@ original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement

Une boîte d'information à onglets

-

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é :

+

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é :

-

+

-

Note: You can see the finished example running live at info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+

Note : Vous pouvez voir l'exemple fini en démonstration sur la page info-box.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

-

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.

+

On pourrait se demander : « 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 ? ». Ce code serait en effet plus simple, mais dans ce cas, 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 » (Single Page Apps) 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.

-

Note: 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 XMLHttpRequest. 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.

+

Note : 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 XMLHttpRequest. 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.

-

Pour commencer, nous aimerions que vous fassiez une copie locale du fichier HTML de départ — info-box-start.html. 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:

+

Pour commencer, effectuez une copie locale du fichier HTML de départ — info-box-start.html. 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 :

-
<section class="info-box">
+
+<section class="info-box">
   <ul>
-    <li><a href="#" class="active">Tab 1</a></li>
-    <li><a href="#">Tab 2</a></li>
-    <li><a href="#">Tab 3</a></li>
+    <li><a href="#" class="active">Onglet 1</a></li>
+    <li><a href="#">Onglet 2</a></li>
+    <li><a href="#">Onglet 3</a></li>
   </ul>
   <div class="panels">
     <article class="active-panel">
-      <h2>The first tab</h2>
+      <h2>Premier onglet</h2>
 
       <p>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.</p>
     </article>
     <article>
-      <h2>The second tab</h2>
+      <h2>Deuxième onglet</h2>
 
-      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
+      <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p>
     </article>
     <article>
-      <h2>The third tab</h2>
+      <h2>Troisième onglet</h2>
 
-      <p>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!</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p>
 
       <ol>
         <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
@@ -69,17 +69,19 @@ original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement
       </ol>
     </article>
   </div>
-</section>

+</section>
+
-

Nous avons un élément {{htmlelement("section")}}  avec une class  info-box, 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 div contient trois éléments {{htmlelement("article")}} , qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.

+

Nous avons un élément <section> avec une class info-box, qui contient un élément <ul> et un élément <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. L'élément div contient trois éléments <article>, qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.

-

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.

+

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 quelques bases de JavaScript 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.

-

General setup

+

Configuration générale

-

To begin with, add the following between your opening and closing {{HTMLElement("style")}} tags:

+

Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes <style> :

-
html {
+
+html {
   font-family: sans-serif;
 }
 
@@ -89,38 +91,43 @@ original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement
 
 body {
   margin: 0;
-}

+}
+
-

This is just some general setup to set a sans-serif font on our page, use the border-box {{cssxref("box-sizing")}} model, and get rid of the default {{htmlelement("body")}} margin.

+

Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle border-box box-sizing, pour surcharger la marge par défaut de <body>.

-

Next, add the following just below your previous CSS:

+

Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent :

-
.info-box {
+
+.info-box {
   width: 450px;
   height: 400px;
   margin: 0 auto;
-}

+}
+
-

This sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto 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.

+

Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce margin: 0 auto. 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.

-

Styling our tabs

+

Mettre en forme les onglets

-

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:

+

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 padding-left et margin-top pour la liste non-ordonnée :

-
.info-box ul {
+
+.info-box ul {
   padding-left: 0;
   margin-top: 0;
 }

 
 

-
Note: We are using descendant selectors with .info-box 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.

+  
Note : On utilise ici un sélecteur de descendants avec .info-box 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.

 

 
-
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 none to get rid of the bullets, and their {{cssxref("width")}} is set to 150px 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.

+
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é list-style-type est placée à none afin de ne plus avoir les puces et width vaut 150px afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments <a> ont display avec la valeur inline-block 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.

 
-
Add the following CSS:

+
Ajoutez le fragment de CSS qui suit :

 
-
.info-box li {
+
+.info-box li {
   float: left;
   list-style-type: none;
   width: 150px;
@@ -134,11 +141,13 @@ body {
   background-color: red;
   color: black;
   text-align: center;
-}

+}
+

 
-
Finally for this section we'll set some styles on the link states. First, we'll set the :focus and :hover 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 class of active is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:

+
Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états :focus et :hover 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 class avec la valeur active 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 :

 
-
.info-box li a:focus, .info-box li a:hover {
+
+.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;
-}

+}
+

 
-
Styling the panels

+
Mettre en forme les panneaux

 
-
The next job is to style our panels. Let's get going!

+
La suite consiste à mettre en forme les panneaux de contenu. Allons-y !

 
-
First, of all, add the following rule to style the .panels {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} relative 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.

+
Pour commencer, ajoutez la règle suivante qui met en forme le conteneur .panels <div>. Ici, on définit une hauteur fixe avec height afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit position relative sur l'élément <div> comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément <html>) pour la mise en forme. Enfin, on utilise clear pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition.

 
-
.info-box .panels {
+
+.info-box .panels {
   height: 352px;
   position: relative;
   clear: both;
-}

+}
+

 
-
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")}}.

+
Dans cette section, nous allons mettre en forme les éléments <article> qui forment les panneaux. La première règle va fixer position absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur <div> avec top et left. C'est la clé de cette disposition : 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 (color), ainsi qu'une couleur d'arrière-plan (background-color).

 
-
The second rule we'll add here makes it so that a panel with a class of active-panel 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 z-index of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.

+
La deuxième règle ajoutée indique qu'un panneau avec une classe (class) valant active-panel aura une valeur de z-index à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un z-index qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.

 
-
.info-box article {
+
+.info-box article {
   position: absolute;
   top: 0;
   left: 0;
@@ -176,151 +189,163 @@ body {
 
 .info-box .active-panel {
   z-index: 1;
-}

+}
+

 
-
Adding our JavaScript

+
Ajouter notre JavaScript

 
-
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):

+
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 <script> (elles se situent après le contenu HTML) :

 
-
var tabs = document.querySelectorAll('.info-box li a');
-var panels = document.querySelectorAll('.info-box article');
+
+let tabs = document.querySelectorAll('.info-box li a');
+let panels = document.querySelectorAll('.info-box article');
 
-for(i = 0; i < tabs.length; i++) {
-  var tab = tabs[i];
+for(let i = 0; i < tabs.length; i++) {
+  let tab = tabs[i];
   setTabHandler(tab, i);
 }
 
 function setTabHandler(tab, tabPos) {
   tab.onclick = function() {
-    for(i = 0; i < tabs.length; i++) {
+    for(let i = 0; i < tabs.length; i++) {
       tabs[i].className = '';
     }
 
     tab.className = 'active';
 
-    for(i = 0; i < panels.length; i++) {
+    for(let i = 0; i < panels.length; i++) {
       panels[i].className = '';
     }
 
     panels[tabPos].className = 'active-panel';
   }
-}

+}
+

 
-
This code does the following:

+
Ce code effectue les actions suivantes :

 
 
    
- 
  • First we save a reference to all the tabs and all the panels in two variables called tabs and panels, so we can easily do things to them later on.
    • 
- 
  • Then we use a for loop to cycle through all the tabs and run a function called setTabHandler() 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 i that indentifies the tab's position in the tabs array.
    • 
- 
  • In the setTabHandler() function, the tab has an onclick event handler set on it, so that when the tab is clicked, the following occurs:
+ 
  • Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées tabs et panels afin qu'on puisse facilement les manipuler par la suite.
    • 
+ 
  • Ensuite, on utilise une boucle for pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée setTabHandler() 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 i qui identifie la position de l'onglet dans le tableau tabs.
    • 
+ 
  • Dans la fonction setTabHandler(), l'onglet se voit affecter un gestionnaire d'évènement onclick. Ainsi dès qu'on clique sur un onglet, on a :
   
      
-   
    • A for loop is used to cycle through all the tabs and remove any classes that are present on them.
      • 
-   
    • A class of active 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.
      • 
-   
    • A for loop is used to cycle through all the panels and remove any classes that are present on them.
      • 
-   
    • A class of active-panel 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.
      • 
+   
    • Une boucle for qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux.
      • 
+   
    • Une classe (class) active 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 color et background-color sur l'onglet afin que celles-ci correspondent aux couleurs du panneau.
      • 
+   
    • Une boucle for qui parcourt tous les panneaux afin de retirer toute classe qui serait présente sur eux.
      • 
+   
    • Une classe active-panel qui est appliquée sur le panneau correspondant à l'onglet. Cela permet d'appliquer la règle CSS vue plus haut qui définit z-index à 1, afin de faire apparaître ce panneau par-dessus les autres.
      • 
   
    
  
    • 
 

 
-
That's it for the first example. Keep your code open, as we'll be adding to it in the second one.

+
Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple.

 
-
A fixed position tabbed info-box

+
Une boîte d'information à onglets avec une position fixe

 
-
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:

+
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 à :

 
-

+

 
 

-
Note: You can see the finished example running live at fixed-info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+
Note : Vous pouvez voir l'exemple fini en démonstration sur la page fixed-info-box.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

 

 
-
As a starting point, you can use your completed example from the first section of the article, or make a local copy of info-box.html from our Github repo.

+
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 info-box.html depuis le dépôt GitHub.

 
-
HTML additions

+
Ajouts au HTML

 
-
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:

+
Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section  (<section>) suivante juste après la balise ouvrante <body> et avant la section existante :

 
-
<section class="fake-content">
-  <h1>Fake content</h1>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-  <p>This is fake content. Your main web page contents would probably go here.</p>
-</section>

+
+<section class="fake-content">
+  <h1>Faux contenu</h1>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+</section>
+

 
 

-
Note: You can feel free to change the fake content for some real content if you like.

+
Note : N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.

 

 
-
Changes to the existing CSS

+
Modifications au CSS existant

 
-
Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your .info-box rule to get rid of margin: 0 auto; (we no longer want the info-box centered), add {{cssxref("position")}}: fixed;, and stick it to the {{cssxref("top")}} of the browser viewport.

+
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 .info-box afin de se débarrasser de margin: 0 auto; (on ne veut plus que la boîte soit centrée) et d'ajouter position: fixed; avant de l'attacher au haut de la zone d'affichage du navigateur avec top.

 
-
It should now look like this:

+
Voici ce à quoi ça devrait ressembler :

 
-
.info-box {
+
+.info-box {
   width: 450px;
   height: 400px;
   position: fixed;
   top: 0;
-}

+}
+

 
-
Styling the main content

+
Mettre en forme le contenu principal

 
-
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:

+
Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant :

 
-
.fake-content {
+
+.fake-content {
   background-color: #a60000;
   color: white;
   padding: 10px;
   height: 2000px;
   margin-left: 470px;
-}

+}
+

 
-
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.

+
Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec background-color, color, et le même remplissage (padding) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante (margin-left) 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.

 
-
This marks the end of the second example; we hope you'll find the third just as interesting.

+
Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile.

 
-
A sliding hidden panel

+
Un panneau glissant masqué

 
-
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.

+
Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » 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.

 
-
Our finished example will look like this:

+
Voilà ce à quoi ressemblera notre exemple terminé :

 
-

+

 
 

-
Note: You can see the finished example running live at hidden-info-panel.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+
Note : Vous pouvez voir l'exemple fini en démonstration sur la page hidden-info-panel.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

 

 
-
As a starting point, make a local copy of hidden-info-panel-start.html 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:

+
Pour commencer, enregistrez le fichier hidden-info-panel-start.html 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 :

 
-
<label for="toggle">❔</label>
+
+<label for="toggle">❔</label>
 <input type="checkbox" id="toggle">
 <aside>
 
   ...
 
-</aside>

+</aside>
+

 
-
To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — <label> 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 <input> checkbox using the for and id attributes.

+
Pour commencer, nous avons un élément <label> et un élément <input>. Les éléments <label> 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 <input> grâce aux attributs for et id.

 
 

-
Note: 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.

+
Note : Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau.

 

 
-
Here we are going to use these elements for a slightly different purpose — another useful side effect of <label> 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 checkbox hack, 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).

+
Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments <label> 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 bidouille de la case à cocher 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 <aside> qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).

 
-
In the below sections we'll explain how this all works.

+
Dans les sections qui suivent, nous expliquerons comment cela fonctionne.

 
-
Styling the form elements

+
Mettre en forme les éléments de formulaire

 
-
First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:

+
Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises <style> :

 
-
label[for="toggle"] {
+
+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;
-}

+}
+

 
-
The first rule styles the <label>; here we've:

+
La première règle met en forme <label>, on y trouve :

 
 
    
- 
  • Set a large {{cssxref("font-size")}} to make the icon nice and big.
    • 
- 
  • Set {{cssxref("position")}} absolute on it, and used {{cssxref("top")}} and {{cssxref("right")}} to position it nicely in the top-right corner.
    • 
- 
  • 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.
    • 
- 
  • 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.
    • 
+ 
  • Une taille de police (font-size) élevée afin que l'icône soit bien visible.
    • 
+ 
  • Une position absolute avec des définitions pour top et right qui permettent de positionner l'icône dans le coin supérieur droit.
    • 
+ 
  • Une définition de z-index à 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.
    • 
+ 
  • Une propriété cursor 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.
    • 
 

 
-
The second rule sets {{cssxref("position")}} absolute on the actual checkbox <input> element, and hides it off the top of the screen. We don't actually want to see this on our UI.

+
La deuxième règle applique position absolute sur la case à cocher <input> et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur.

 
-
Styling the panel

+
Mettre en forme le panneau

 
-
Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:

+
Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS :

 
-
aside {
+
+aside {
   background-color: #a60000;
   color: white;
 
@@ -362,47 +389,50 @@ input[type="checkbox"] {
   right: -370px;
 
   transition: 0.6s all;
-}

+}
+

 
-
There's a lot going on here — let's discuss it bit by bit:

+
Il y a plusieurs déclarations ici, voyons-les au fur et à mesure :

 
 
    
- 
  • First, we set some simple {{cssxref("background-color")}} and {{cssxref("color")}} on the info box.
    • 
- 
  • Next, we set a fixed {{cssxref("width")}} on the panel, and make its {{cssxref("height")}} the entire height of the browser viewport.
    • 
- 
  • We also include some horizontal {{cssxref("padding")}} to space it out a bit.
    • 
- 
  • Next we set {{cssxref("position")}}: fixed; 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")}}.
    • 
- 
  • 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 <label> will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...
    • 
+ 
  • Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec background-color et color.
    • 
+ 
  • Ensuite, on définit une largeur (width) fixe sur le panneau et on définit la hauteur (height) afin que celle-ci occupe la hauteur de toute la zone d'affichage.
    • 
+ 
  • On ajoute également du remplissage (padding) horizontal pour espacer légèrement.
    • 
+ 
  • Ensuite, on utilise position: fixed; 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 (top) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite (right) et en dehors de l'écran.
    • 
+ 
  • Enfin, on applique une transition 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 « actif » et « inactif ». 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.
    • 
 

 
-
Setting the checked state

+
Définir l'état coché

 
-
There is one final bit of CSS to add — put the following at the bottom of your CSS:

+
Voici le dernier fragment de CSS à ajouter, là encore à la fin :

 
-
input[type=checkbox]:checked + aside {
+
+input[type=checkbox]:checked + aside {
   right: 0px;
-}

+}
+

 
-
The selector is pretty complex here — we are selecting the <aside> element adjacent to the <input> 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 <aside> to 0px, 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.

+
Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément <aside> adjacent à l'élément <input>, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe :checked). Lorsque c'est le cas, on définit la propriété right de l'élément <aside> à 0px, 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.

 
-
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.

+
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 : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : 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.

 
-
Summary

+
Résumé

 
-
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.

+
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 flexbox.

 
-
In this module

+
Dans ce module

 
 
-- 
cgit v1.2.3-54-g00ecf
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (étudier Introduction au CSS.)Prérequis :Les fondamentaux en HTML (étudier Une introduction au HTML), et une idée du fonctionnement du CSS (étudier Une introduction à CSS.)
Objectif:Objectif : Avoir une idée des aspects pratiques du positionnement