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.
| 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 <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 :
|
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.
| 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 :
|
| 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.
Pour centrer les titres :
h3 {
border-top: 1px solid gray;
text-align: center;
}
Ce qui donne :
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.
| 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 :
(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,fixedouabsolute.
-
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.
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
#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 : / \
|
| 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.
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 : 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
(B) Paragraphes numérotés 1 : Lorem ipsum 2 : Dolor sit 3 : Amet consectetuer 4 : Magna aliquam 5 : Autem veleum
|
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.