Sur cette page :

1. Taille d’un bloc
2. Dépassement
3. Bordures
4. Marges
5. Fond
6. Conclusion

18.1# Taille d’un bloc

CSS propose une série de propriétés pour définir la taille d’un bloc. La largeur est définie grâce à width et la hauteur grâce à height. La plupart du temps, les dimensions d’un bloc sont définies en pixels (ou une autre unité de longueur utilisable en CSS),en pourcentage relativement à la taille de l’élément parent, ou en utilisant la valeur auto, qui laissera le navigateur définir la taille en fonction du contenu.

Quatre autres propriétés peuvent être utilisées pour définir la taille d’un bloc : min-width et min-height permettent de définir la taille minimale du bloc, cela signifie que si son contenu dépasse ces dimensions, alors la taille du bloc sera adaptée. De la même manière, max-width et max-height permettent de définir la taille maximale d’un bloc. Ses dimensions seront réduites si son contenu ne dépasse pas ces dimensions, sinon, le contenu débordant sera géré en fonction de la politique de dépassement définie.

• supporté
• min-width, min-height, max-width et max-height ne sont supportées qu’à partir d’internet explorer 7, avec internet explorer 6, le comportement de width est proche de celui de min-width.
• supporté
• supporté
• supporté

18.2# Dépassement

Dans certains cas, le contenu d’un bloc déborde car la taille définie est trop courte. Il existe plusieurs manières de gérer ce problème offertes grâce à la propriété overflow.

La valeur hidden permet de masquer le contenu débordant du bloc, visible laissera le contenu déborder, scroll affichera des scrollbars pour permettre à l’utilisateur de voir la totalité du contenu du bloc sans déborder, enfin auto permet de laisser le navigateur gérer le dépassement (généralement il affichera des scrollbars uniquement si le contenu déborde).

18.3# Bordures

Il existe trois notions définissant l’apparence des bordures d’un bloc : l’épaisseur, l’aspect et la couleur. CSS offre un grand nombre de propriétés qui permettent de spécifier ces notions individuellement pour chacune des quatre bordures du bloc, ou de les définir globalement. Ainsi, la propriété border concerne toutes les bordures, tandis que border-top, border-bottom, border-left et border-right, correspondent respectivement à la bordure supérieure, inférieure, de gauche et de droite.

Pour traiter l’apparence des bordures, vous pouvez également utiliser border-width (épaisseur), border-color (couleur) et border-style (aspect).

Il est enfin possible d’utiliser ces propriétés pour chacune des bordures, par exemple, pour définir la couleur de la bordure supérieure, vous pourrez utiliser border-top-color.

Avant de s’intéresser à quelques exemples qui devraient éclaircir tout ça, nous allons nous intéresser aux valeurs que peuvent porter ces propriétés :

• L’épaisseur de la bordure est généralement définie par une valeur en pixels (en millimètres pour l’impression), ou avec les valeurs thin (fin), medium (moyen), thick (épais). Ces trois dernières valeurs sont rarement utilisées car elles dépendent de généralement du navigateur, l’intégrateur n’a donc pas toujours le contrôle sur l’aspect.
• La couleur est définie de la même manière que la couleur du texte.
• Enfin, l’aspect admet plusieurs valeurs correspondant au style du trait :
  • none, hidden : ces deux valeurs signifient que la bordure est absente (son épaisseur est égale à 0),
  • dotted : le trait est en pointillés,
  • dashed : le trait est dessiné par des tirets,
  • solid : le trait est continu,
  • double : la bordure est constituée de deux traits, la largeur de la bordure correspond à la largeur des deux traits et de l’espace entre les deux,
  • groove : la bordure forme un cadre dont le contenu semble placé devant la bordure,
  • ridge : la bordure forme un cadre dont le contenu semble placé derrière la bordure,
  • inset : le bloc forme un creux,
  • outset : le bloc est surélevé.

• supporté
• hidden n’est pas interprété avant la version 8.
• supporté
• supporté
• supporté

La valeur par défaut pour le style d’une bordure est none, il est donc nécessaire de choisir explicitement l’aspect d’une bordure pour l’afficher. Si aucune couleur n’est définie, c’est celle du texte qui est utilisée, tandis que l’épaisseur par défaut est medium.

Ainsi, la manière la plus directe de définir une bordure est d’utiliser la propriété border en définissant l’épaisseur, l’aspect et la couleur (l’ordre n’a pas d’importance) :

div { border: 1px red solid; }
pre
{
  border-left-width: 5px;
  border-left-color: aqua;
  border-left-style: dashed;
}

Par ailleurs, il est possible de définir des valeurs distinctes pour chacune des bordures en utilisant border. Quand deux valeurs sont indiquées, celles-ci correspondent respectivement aux bordures horizontales et aux bordures verticales. Si quatre valeurs sont définies, alors elles correspondent dans l’ordre à la bordure supérieure, de droite, inférieure et de gauche (dans le sens des aiguilles d’une montre).

border: 1px 0px;
/* équivaut à : */
border-top: 1px;
border-bottom: 1px;
border-left: 0px;
border-right: 0px;

border: 1px 2px 3px 4px;
/* équivaut à : */
border-top: 1px;
border-right: 2px;
border-bottom: 3px;
border-left: 4px;

18.4# Marges

Un bloc possède une marge intérieure entre le contenu et la bordure et une marge à l’extérieur.

Sur cette illustration, la zone bleue correspond à la marge extérieure (margin), le trait noir à la bordure et la zone rouge à la marge intérieure (padding). Le rectangle central est la zone du contenu du bloc.

Tout comme les bordures, il est possible de préciser des valeurs distinctes pour chacune des marges, grâce aux suffixes -left, -right, -top et -bottom, ou encore en définissant plusieurs valeurs pour les propriétés margin et padding.

p {
  margin: 10px;
  padding: 5px;
}
blockquote {
  margin: 10px 5px;
  padding: 0px 0px 0px 10px;
}
pre {
  margin-left: 15px;
}

• supporté
• le support de margin et padding sous internet explorer peut poser des problèmes qui seront discutés au prochain chapitre sur le mode Quriks.
• supporté
• supporté
• supporté

La propriété margin supporte également la propriété auto qui permet de centrer un bloc horizontalement, nous en discuterons au chapitre sur le positionnement des blocs.

18.5# Fond

Le fond d’un bloc peut être une image ou une couleur unie. Dans ce dernier cas, vous pouvez utiliser indifféremment la propriété background-color ou le raccourci background, la valeur étant une couleur définie de la même manière que celle du texte ou des bordures.

Le fond s’applique sur l’intérieur du bloc, les bordures et marges extérieures ne sont donc pas concernées. Par ailleurs, la valeur par défaut du fond étant transparent, des blocs imbriqués seront affichés au dessus du fond du bloc parent.

On complique un peu les choses : pour insérer une image, utilisez la propriété background-image, avec pour valeur url('[adresse]'). L’adresse de l’image est relative à la feuille de style et non pas à la page :

Exemple d'arborescence de fichiers :
/
| /images
|  | background.png
| /styles
|  | styles.css
| page.html

background-image: url('../images/background.png');

L’image est alors placée en haut à gauche du bloc, si le bloc est plus grand que l’image, celle-ci est répétée en mosaïque. Certaines propriétés CSS permettent de modifier ce comportement. La position peut être réglée verticalement ou horizontalement grâce à background-position, la répétition avec background-repeat.

La position peut être indiquée en pixels ou en pourcentage (calculé selon la largeur ou la hauteur du bloc), ou à l’aide de mots clés :

• top, center ou bottom en hauteur,
• left, center ou right en largeur.

Vous devrez préciser la valeur verticale (en hauteur) en premier puis la position horizontale. Si une seule valeur est précisée, la position horizontale sera 50% (center). Il est possible de mélanger position en pixels et pourcentages. Les valeurs négatives sont autorisées.

background-image: url('monimage.png');
background-position: 30px 10px;

La propriété background-repeat admet quatre valeurs : repeat (par défaut), no-repeat (aucune répétition), repeat-x (répéter à l’horizontal) et repeat-y (répéter verticalement).

Enfin, la propriété background-attachment permet de spécifier où sera collé le papier peint : sur le fond du bloc ou sur le fond de la page. En fait, cela permet de choisir le comportement du fond en fonction du déroulement de la page à l’aide des ascenseurs. La valeur par défaut scroll signifie que le fond suivra le mouvement du bloc, tandis que la valeur fixed signifie que le fond sera collé au fond de la page et ne bougera pas à l’écran, seul le contenu sera déplacé.

Vous pouvez voir cette propriété à l’œuvre sur la page de test. Pour vérifier son fonctionnement, vous devez vous assurer que la hauteur de la fenêtre de votre navigateur soit inférieure à la hauteur de la page, pour pouvoir utiliser les ascenseurs.

background-image: url('monimage.png');
background-attachment: fixed;

Vous pouvez maintenant regrouper ces valeurs grâce à la propriété raccourci background qui peut s’écrire ainsi :

background: [couleur] [image] [répétition] [attachement] [position];
/* Toutes les propriétés résumées en une seule */
background: red url('./images/bg.png') no-repeat top center;
/* ...ou seulement celles qui sont nécessaires */
background: url('images/bg.png') repeat-x;

18.6# Conclusion

Les blocs sont des éléments essentiels de la mise en forme d’une page web. Ils représentent les principaux outils de conception de pages web actuels. Leur mise en forme est un point important, mais leur positionnement est un art encore plus complexe et important à maîtriser. Nous prendrons le temps d’étudier cet aspect au long des prochains chapitres.