CSS 2 – Pratique du design web
© Groupe Eyrolles, 2005
XII
CHAPITRE 6
Les bordures, arrière-plans et images ....................................... 85
Mettre en forme les bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Les différents styles de bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
L’épaisseur des bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
La couleur des bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Notation raccourcie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Applications pratiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Supprimer la bordure d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Afficher un trait vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Arrière-plans et images de fond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Image de contenu ou image d’arrière-plan ? . . . . . . . . . . . . . . . . . . . . . . . . . 90
Afficher une couleur de fond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Insérer une image d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Positionner l’image à sa convenance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Répéter l’image ou non . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Fixer l’image par rapport au contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Notation raccourcie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
CHAPITRE 7
Le positionnement en CSS .......................................................... 97
Introduction au positionnement en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Comprendre le modèle de boîte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Les dimensions des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Différents modèles de boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Éléments ancêtres, parents, enfants et frères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Comprendre la notion de flux du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Positionner les éléments en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Positionner dans le flux courant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Le positionnement relatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Les positionnements absolu et fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Le positionnement absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Le positionnement fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
La profondeur : z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Le positionnement flottant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Quel positionnement adopter ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Quand positionner dans le flux ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
© Groupe Eyrolles, 2005
XII
CHAPITRE 6
Les bordures, arrière-plans et images ....................................... 85
Mettre en forme les bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Les différents styles de bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
L’épaisseur des bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
La couleur des bordures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Notation raccourcie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Applications pratiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Supprimer la bordure d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Afficher un trait vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Arrière-plans et images de fond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Image de contenu ou image d’arrière-plan ? . . . . . . . . . . . . . . . . . . . . . . . . . 90
Afficher une couleur de fond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Insérer une image d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Positionner l’image à sa convenance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Répéter l’image ou non . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Fixer l’image par rapport au contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Notation raccourcie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
CHAPITRE 7
Le positionnement en CSS .......................................................... 97
Introduction au positionnement en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Comprendre le modèle de boîte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Les dimensions des boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Différents modèles de boîtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Éléments ancêtres, parents, enfants et frères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Comprendre la notion de flux du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Positionner les éléments en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Positionner dans le flux courant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Le positionnement relatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Les positionnements absolu et fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Le positionnement absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Le positionnement fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
La profondeur : z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Le positionnement flottant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Quel positionnement adopter ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Quand positionner dans le flux ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119