mozilla
Vos résultats de recherche

    Mise en page

     

    Cette page présente plusieurs manières d'ajuster la mise en page de votre document.

    Vous modifierez la mise en page de votre document exemple...

    Information : mise en page

    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.

    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.

    Cette page décrit certaines techniques simples que vous pouvez essayer.

    Structure du document

    Si vous voulez contrôler la mise en page de votre document, il peut être nécessaire de changer sa structure.

    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 DIV pour créer une telle structure.

    Exemple
    Dans votre document d'exemple, les paragraphes numérotés sous le second titre n'ont aucun conteneur propre.

    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.

    Pour régler ce problème structurel, vous pouvez ajouter une balise DIV autour des paragraphes. Cette balise sera rendue unique en étant identifiée par un attribut id :

    <H3 class="numerote">Paragraphes numérotés</H3>
    <DIV id="numerote">
    <P class="numerote">Lorem ipsum</P>
    <P class="numerote">Dolor sit</P>
    <P class="numerote">Amet consectetuer</P>
    <P class="numerote">Magna aliquam</P>
    <P class="numerote">Autem veleum</P>
    </DIV>
    

    À présent, votre feuille de style peut utiliser une règle pour ajouter des bordures autour des deux listes.

    ul, #numerote {
      border: 1em solid #69b;
      padding-right:1em;
      }
    

    Le résultat devrait ressembler à ceci :

    (A) Les océans

    • Arctique
    • Atlantique
    • Pacifique
    • Indien
    • Antarctique

    (B) Paragraphes numérotés

    1 : Lorem ipsum

    2 : Dolor sit

    3 : Amet consectetuer

    4 : Magna aliquam

    5 : Autem veleum

    Unités de mesure

    Jusqu'à présent, dans ce tutoriel, nous avont spécifié les tailles en pixels (px). 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.

    Dans de nombreux cas il est préférable de spécifier les tailles en pourcentages ou en ems (em). 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.

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

    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 :

    Veuillez me redimensionner
    Plus de détails
    Pour d'autres périphériques, d'autres unités de longueur seront plus appropriées.

    Plus d'informations à ce sujet sont disponibles dans une prochaine page de ce tutoriel.

    Pour plus de détails sur les valeurs et les unités que vous pouvez utiliser, consultez Values dans la spécification CSS.

    Alignement du texte

    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 :

    • text-align
    Aligne le contenu. Utiilisez une de ces valeurs : left (à gauche), right (à droite), center (centré), justify (justifié)
    • text-indent
    Donne une certaine retrait (indentation) au contenu, de la largeur spécifiée.

    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.

    Exemple
    Pour centrer les titres :
    h3 {
      border-top: 1px solid gray;
      text-align: center;
      }
    

    Ce qui donne :

    (A) Les océans

    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.

    Les éléments flottants

    La propriété float force un élément à se placer à gauche ou à droite. C'est une manière simple de contrôler sa position et sa taille.

    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é clear sur d'autres éléments pour les désolidariser des éléments flottants et les ramener en dessous.

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

    Pour que les titres restent en place, vous devez également spécifier qu'ils resteront à l'écart des éléments flottants à leur gauche :

    ul, #numerote {float: left;}
    h3 {clear: left;}
    

    Le résultat devrait ressembler à ceci :

    (A) Les océans

    • Arctique
    • Atlantique
    • Pacifique
    • Indien
    • Antarctique

    (B) Paragraphes numérotés

    1 : Lorem ipsum

    2 : Dolor sit

    3 : Amet consectetuer

    4 : Magna aliquam

    5 : Autem veleum

    (Une petite marge intérieure est nécessaire à droite des boîtes, là où la bordure est trop proche du texte.)

    Positionnement

    Vous pouvez spécifier la position d'un élément de quatre manières différentes à l'aide de la propriété position et de l'une des valeurs suivantes.

    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.

    • relative
    La position de l'élément est déplacée relativement à sa position normale.
    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.
    • fixed
    La position de l'élément est fixée.
    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.
    • absolute
    La position de l'élément est fixée relativement à un élément parent.
    Cela fonctionnera uniquement lorsque l'élément parent est lui-même positionné avec relative, fixed ou absolute.
    Vous pouvez rendre n'importe quel élément parent utilisable pour ceci en lui spécifiant une position: relative; sans par ailleurs lui spécifier aucun déplacement.
    • static
    La valeur par défaut. Utilisez cette valeur pour désactiver explicitement les autres sortes de positionnement.

    En complément de ces valeurs de la propriété position (à l'exception de static), spécifiez une ou plusieurs de ces propriétés : top (haut), right (droite), bottom (bas), left (gauche), width (largeur), height (hauteur) pour identifier où l'élément doit se positionner, et éventuellement sa taille.

    Exemple
    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 id="parent-div">
    <P id="forward">/</P>
    <P id="back">\</P>
    </DIV>
    

    Dans votre feuille de style, rendez la position de l'élément parent relative. Il n'est pas nécessaire de spécifier un déplacement. Rendez ensuite la position des enfants absolute :

    #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;
      }
    

    Le résultat ressemble à ceci, avec la barre oblique inversée par dessus l'autre barre oblique :

    /

    \

     

     

    Plus de détails
    L'ensemble des informations sur le positionnement prend deux chapitres entiers et assez complexes dans la spécification CSS : Visual formatting model et Visual formatting model details.

    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.

    Action : spécification d'une mise en page

    Modifiez vos exemples de document et de feuille de style à l'aide des exemples ci-dessus dans les sections Structure du document et Éléments flottants.

    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.

    Challenge
    Modifiez votre document en ajoutant cette balise près de la fin, juste avant </BODY>
    <IMG id="fixed-pin" src="punaise-jaune.png" alt="Punaise jaune">
    

    Si vous n'avez pas téléchargé l'image plus tôt dans ce tutoriel, téléchargez-la maintenant :

    Image:punaise-jaune.png

    Essayez de deviner où l'image apparaîtra dans votre document. Actualisez dans votre navigateur pour voir si vous aviez raison.

    Ajoutez une règle à votre feuile de style qui fixe l'image en haut à droite de votre document.

    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 :

    (A) Les océans

    • Arctique
    • Atlantique
    • Pacifique
    • Indien
    • Antarctique

    (B) Paragraphes numérotés

    1 : Lorem ipsum

    2 : Dolor sit

    3 : Amet consectetuer

    4 : Magna aliquam

    5 : Autem veleum

     

    Punaise jaune

     

    Pour continuer

    Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

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

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: Verruckt, teoli, BenoitL
    Dernière mise à jour par : teoli,