path: root/files/fr/css/premiers_pas/mise_en_page/index.html

---
title: Mise en page
slug: CSS/Premiers_pas/Mise_en_page
tags:
  - CSS
  - 'CSS:Premiers_pas'
translation_of: Learn/CSS/CSS_layout
translation_of_original: Web/Guide/CSS/Getting_started/Layout
---
<p> </p>
<p>Cette page présente plusieurs manières d'ajuster la mise en page de votre document.</p>
<p>Vous modifierez la mise en page de votre document exemple...</p>
<h3 id="Information_:_mise_en_page" name="Information_:_mise_en_page">Information : mise en page</h3>
<p>Vous pouvez utiliser CSS pour spécifier de nombreux effets visuels changeant la mise en page de votre document. Certaines de ces techniques sont très avancées et dépassent de loin le niveau de tutoriel basique.</p>
<p>Lorsque vous réalisez une mise en page qui doit apparaître d'une manière similaire dans de nombreux navigateurs, votre feuille de style interagit avec le style par défaut du navigateur et le moteur de rendu de manières qui peuvent s'avérer complexes. Ce sujet n'est pas non plus couvert par ce tutoriel.</p>
<p>Cette page décrit certaines techniques simples que vous pouvez essayer.</p>
<h4 id="Structure_du_document" name="Structure_du_document">Structure du document</h4>
<p>Si vous voulez contrôler la mise en page de votre document, il peut être nécessaire de changer sa structure.</p>
<p>Le langage de balisage de votre document peut disposer de balises générales créant une certaine structure. Par exemple, dans HTML vous pouvez utiliser la balise <code>DIV</code> pour créer une telle structure.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Dans votre document d'exemple, les paragraphes numérotés sous le second titre n'ont aucun conteneur propre.
        <p>Votre feuille de style ne peut pas dessiner une bordure autour de ces paragraphes, puisqu'il n'y a pas d'élément qui peut être spécifié dans le sélecteur.</p>
        <p>Pour régler ce problème structurel, vous pouvez ajouter une balise <code>DIV</code> autour des paragraphes. Cette balise sera rendue unique en étant identifiée par un attribut <code>id</code> :</p>
        <div style="width: 40em; color: gray;">
          <pre class="eval">
&lt;H3 class="numerote"&gt;Paragraphes numérotés&lt;/H3&gt;
<strong style="color: black;">&lt;DIV id="numerote"&gt;</strong>
&lt;P class="numerote"&gt;Lorem ipsum&lt;/P&gt;
&lt;P class="numerote"&gt;Dolor sit&lt;/P&gt;
&lt;P class="numerote"&gt;Amet consectetuer&lt;/P&gt;
&lt;P class="numerote"&gt;Magna aliquam&lt;/P&gt;
&lt;P class="numerote"&gt;Autem veleum&lt;/P&gt;
<strong style="color: black;">&lt;/DIV&gt;</strong>
</pre>
        </div>
        <p>À présent, votre feuille de style peut utiliser une règle pour ajouter des bordures autour des deux listes.</p>
        <div style="width: 30em;">
          <pre class="eval">
ul, #numerote {
  border: 1em solid #69b;
  padding-right:1em;
  }
</pre>
        </div>
        <p>Le résultat devrait ressembler à ceci :</p>
        <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p>
                <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;">
                  <ul style="">
                    <li>Arctique</li>
                    <li>Atlantique</li>
                    <li>Pacifique</li>
                    <li>Indien</li>
                    <li>Antarctique</li>
                  </ul>
                </div>
                <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p>
                <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
                  <p><b>1 : </b>Lorem ipsum</p>
                  <p><b>2 : </b>Dolor sit</p>
                  <p><b>3 : </b>Amet consectetuer</p>
                  <p><b>4 : </b>Magna aliquam</p>
                  <p><b>5 : </b>Autem veleum</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Unit.C3.A9s_de_mesure" name="Unit.C3.A9s_de_mesure">Unités de mesure</h4>
<p>Jusqu'à présent, dans ce tutoriel, nous avont spécifié les tailles en pixels (<code>px</code>). Ceux-ci sont appropriés pour certains usages sur un dispositif d'affichage comme un écran d'ordinateur, mais dès que l'utilisateur change la taille de police, votre mise en page peut être affectée négativement.</p>
<p>Dans de nombreux cas il est préférable de spécifier les tailles en pourcentages ou en ems (<code>em</code>). Un em est défini comme la taille de police actuelle (théoriquement la largeur d'une lettre m). Lorsque l'utilisateur change la taille de police, votre mise en page s'ajustera donc automatiquement.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>La bordure à gauche de ce texte a son épaisseur spécifiée en pixels. La bordure de droite a son épaisseur spécifiée en ems.
        <p>Dans votre navigateur, changez la taille de police pour observer la façon dont la bordure de droite s'ajuste, mais pas celle de gauche :</p>
        <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <div style="">
                  Veuillez me redimensionner</div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
  <caption>
    Plus de détails</caption>
  <tbody>
    <tr>
      <td>Pour d'autres périphériques, d'autres unités de longueur seront plus appropriées.
        <p>Plus d'informations à ce sujet sont disponibles dans une prochaine page de ce tutoriel.</p>
        <p>Pour plus de détails sur les valeurs et les unités que vous pouvez utiliser, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> dans la spécification CSS.</p>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Alignement_du_texte" name="Alignement_du_texte">Alignement du texte</h4>
<p>Deux propriétés spécifient la manière dont le contenu d'un élement est aligné. Vous pouvez les utiliser pour des ajustements simples de la mise en page :</p>
<ul>
  <li><code>text-align</code></li>
</ul>
<dl>
  <dd>
    Aligne le contenu. Utiilisez une de ces valeurs : <code>left</code> (à gauche), <code>right</code> (à droite), <code>center</code> (centré), <code>justify</code> (justifié)</dd>
</dl>
<ul>
  <li><code>text-indent</code></li>
</ul>
<dl>
  <dd>
    Donne une certaine retrait (indentation) au contenu, de la largeur spécifiée.</dd>
</dl>
<p>Ces propriétés s'appliquent à tout contenu semblable à du texte dans l'élément, pas uniquement au texte proprement dit. N'oubliez pas qu'elles sont héritées par les enfants de l'élément, ce qui peut vous obliger à les désactiver explicitement dans les éléments enfants pour éviter certains résultats surprenants.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Pour centrer les titres :
        <div style="width: 30em;">
          <pre class="eval">
h3 {
  border-top: 1px solid gray;
  text-align: center;
  }
</pre>
        </div>
        <p>Ce qui donne :</p>
        <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) Les océans</p>
              </td>
            </tr>
          </tbody>
        </table>
        <p>Dans un document HTML, le contenu que vous voyez sous un titre n'est pas structurellement contenu par ce titre. Par conséquent, lorsque vous alignez un titre de cette manière, les balises situées en dessous n'héritent pas du style.</p>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Les_.C3.A9l.C3.A9ments_flottants" name="Les_.C3.A9l.C3.A9ments_flottants">Les éléments flottants</h4>
<p>La propriété <code>float</code> force un élément à se placer à gauche ou à droite. C'est une manière simple de contrôler sa position et sa taille.</p>
<p>Le reste du contenu du document s'écoule normalement autour de l'élément flottant. Vous pouvez contrôler ceci à l'aide de la propriété <code>clear</code> sur d'autres éléments pour les désolidariser des éléments flottants et les ramener en dessous.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Dans votre document d'exemple, les listes s'étalent sur toute la largeur de la fenêtre. Vous pouvez les en empêcher en les faisant flotter à gauche.
        <p>Pour que les titres restent en place, vous devez également spécifier qu'ils resteront à l'écart des éléments flottants à leur gauche :</p>
        <div style="width: 30em;">
          <pre class="eval">
ul, #numerote {float: left;}
h3 {clear: left;}
</pre>
        </div>
        <p>Le résultat devrait ressembler à ceci :</p>
        <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;">
          <tbody>
            <tr>
              <td>
                <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p>
                <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
                  <ul style="">
                    <li style="">Arctique</li>
                    <li style="">Atlantique</li>
                    <li style="">Pacifique</li>
                    <li style="">Indien</li>
                    <li style="">Antarctique</li>
                  </ul>
                </div>
                <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p>
                <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
                  <p><b>1 : </b>Lorem ipsum</p>
                  <p><b>2 : </b>Dolor sit</p>
                  <p><b>3 : </b>Amet consectetuer</p>
                  <p><b>4 : </b>Magna aliquam</p>
                  <p><b>5 : </b>Autem veleum</p>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <p>(Une petite marge intérieure est nécessaire à droite des boîtes, là où la bordure est trop proche du texte.)</p>
      </td>
    </tr>
  </tbody>
</table>
<h4 id="Positionnement" name="Positionnement">Positionnement</h4>
<p>Vous pouvez spécifier la position d'un élément de quatre manières différentes à l'aide de la propriété <code>position</code> et de l'une des valeurs suivantes.</p>
<p>L'utilisation de ces propriétés peut être très avancée. Il est cependant possible de les utiliser de manière simple — c'est pourquoi elles sont mentionnées dans ce tutoriel basique. Mais leur utilisation dans des mises en page complexes peut s'avérer difficile.</p>
<ul>
  <li><code>relative</code></li>
</ul>
<dl>
  <dd>
    La position de l'élément est déplacée relativement à sa position normale.</dd>
  <dd>
    Utilisez ceci pour déplacer un élément d'une certaine distance spécifiée. Dans certains cas, vous pouvez aussi utiliser les marges de l'élément pour obtenir le même effet.</dd>
</dl>
<ul>
  <li><code>fixed</code></li>
</ul>
<dl>
  <dd>
    La position de l'élément est fixée.</dd>
  <dd>
    Spécifie la position de l'élément relativement à la fenêtre du document. Même si le reste du document défile, l'élément reste en place.</dd>
</dl>
<ul>
  <li><code>absolute</code></li>
</ul>
<dl>
  <dd>
    La position de l'élément est fixée relativement à un élément parent.</dd>
  <dd>
    Cela fonctionnera uniquement lorsque l'élément parent est lui-même positionné avec <code>relative</code>, <code>fixed</code> ou <code>absolute</code>.</dd>
</dl>
<dl>
  <dd>
    Vous pouvez rendre n'importe quel élément parent utilisable pour ceci en lui spécifiant une <code>position: relative;</code> sans par ailleurs lui spécifier aucun déplacement.</dd>
</dl>
<ul>
  <li><code>static</code></li>
</ul>
<dl>
  <dd>
    La valeur par défaut. Utilisez cette valeur pour désactiver explicitement les autres sortes de positionnement.</dd>
</dl>
<p>En complément de ces valeurs de la propriété <code>position</code> (à l'exception de <code>static</code>), spécifiez une ou plusieurs de ces propriétés : <code>top</code> (haut), <code>right</code> (droite), <code>bottom</code> (bas), <code>left</code> (gauche), <code>width</code> (largeur), <code>height</code> (hauteur) pour identifier où l'élément doit se positionner, et éventuellement sa taille.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
  <caption>
    Exemple</caption>
  <tbody>
    <tr>
      <td>Pour positionner deux éléments l'un au dessus de l'autre, créez un élément parent conteneur avec les deux éléments à l'intérieur de celui-ci :
        <div style="width: 30em;">
          <pre class="eval">
&lt;DIV id="parent-div"&gt;
&lt;P id="forward"&gt;/&lt;/P&gt;
&lt;P id="back"&gt;\&lt;/P&gt;
&lt;/DIV&gt;
</pre>
        </div>
        <p>Dans votre feuille de style, rendez la position de l'élément parent <code>relative</code>. Il n'est pas nécessaire de spécifier un déplacement. Rendez ensuite la position des enfants <code>absolute</code> :</p>
        <div style="width: 30em;">
          <pre>
#parent-div {
  position: relative;
  font: bold 200% sans-serif;
  }

#forward, #back {
  position: absolute;
  margin:0px;
  top: 0px;
  left: 0px;
  }

#forward {
  color: blue;
  }

#back {
  color: red;
  }
</pre>
        </div>
        <p>Le résultat ressemble à ceci, avec la barre oblique inversée par dessus l'autre barre oblique :</p>
        <div style="position: relative; left: .33em; font: bold 300% sans-serif;">
          <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>
          <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
        </div>
        <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;">
          <tbody>
            <tr>
              <td> </td>
            </tr>
          </tbody>
        </table>
        <p> </p>
      </td>
    </tr>
  </tbody>
</table>
<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
  <caption>
    Plus de détails</caption>
  <tbody>
    <tr>
      <td>L'ensemble des informations sur le positionnement prend deux chapitres entiers et assez complexes dans la spécification CSS : <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> et <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>.
        <p>Si vous réalisez des feuilles de style devant fonctionner dans de nombreux navigateurs, vous devrez aussi prendre en compte les différences dans la manière dont ceux-ci interprètent le standard, voire les erreurs présentes dans certaines versions particulières de certains d'entre-eux.</p>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Action_:_sp.C3.A9cification_d.27une_mise_en_page" name="Action_:_sp.C3.A9cification_d.27une_mise_en_page">Action : spécification d'une mise en page</h3>
<p>Modifiez vos exemples de document et de feuille de style à l'aide des exemples ci-dessus dans les sections <b>Structure du document</b> et <b>Éléments flottants</b>.</p>
<p>Dans l'exemple des éléments flottants, ajoutez une marge intérieure (padding) pour séparer le texte de la bordure de droite de 0.5 em.</p>
<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
  <caption>
    Challenge</caption>
  <tbody>
    <tr>
      <td>Modifiez votre document en ajoutant cette balise près de la fin, juste avant <code>&lt;/BODY&gt;</code>
        <pre>
&lt;IMG id="fixed-pin" src="punaise-jaune.png" alt="Punaise jaune"&gt;
</pre>
        <p>Si vous n'avez pas téléchargé l'image plus tôt dans ce tutoriel, téléchargez-la maintenant :</p>
        <table style="border: 2px solid #ccc;">
          <tbody>
            <tr>
              <td><img alt="Image:punaise-jaune.png"></td>
            </tr>
          </tbody>
        </table>
        <p>Essayez de deviner où l'image apparaîtra dans votre document. Actualisez dans votre navigateur pour voir si vous aviez raison.</p>
        <p>Ajoutez une règle à votre feuile de style qui fixe l'image en haut à droite de votre document.</p>
        <p>Actualisez dans votre navigateur et réduisez la taille de la fenêtre. Vérifiez que l'image reste en haut à droite même lorsque vous faites défiler votre document :</p>
        <div style="position: relative; width: 29.5em; height: 18em;">
          <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
            <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p>
            <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
              <ul style="">
                <li style="">Arctique</li>
                <li style="">Atlantique</li>
                <li style="">Pacifique</li>
                <li style="">Indien</li>
                <li style="">Antarctique</li>
              </ul>
            </div>
            <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p>
            <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
              <p><b>1 : </b>Lorem ipsum</p>
              <p><b>2 : </b>Dolor sit</p>
              <p><b>3 : </b>Amet consectetuer</p>
              <p><b>4 : </b>Magna aliquam</p>
              <p><b>5 : </b>Autem veleum</p>
            </div>
            <p style=""> </p>
            <div style="position: absolute; top: 2px; right: 0px;">
              <img alt="Punaise jaune"></div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p> </p>
<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>
<p>Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p>
<p>Vous avez presque couvert tous les sujets de ce tutoriel CSS basique. La page suivante décrit des sélecteurs plus avancés pour les règles CSS, et certaines manières spécifiques de styler des tableaux : <b><a href="/fr/docs/CSS/Premiers_pas/Tableaux">Tableaux</a></b>.</p>