Table des matières
© Groupe Eyrolles, 2005
XIII
Quand positionner en relatif ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Quand positionner en absolu ou en fixe ? . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Quand positionner en flottant ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Tableau récapitulatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
TROISIÈME PARTIE
Travaux pratiques ......................................................123
CHAPITRE 8
Centrage des éléments en CSS ................................................. 125
Centrage des éléments de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Centrage horizontal des éléments de contenu . . . . . . . . . . . . . . . . . . . . . . . . 126
Centrage vertical des éléments de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . 127
La méthode vertical-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
La méthode line-height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Centrage des blocs et conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Centrage horizontal des conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Centrage dans le flux courant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Centrage en positionnement absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Centrage vertical des conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
CHAPITRE 9
Précharger des images .............................................................. 135
Principe et utilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Masquer les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Application à une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Application à un ensemble d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
L’affichage hors de la zone de visualisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Accessibilité de ces techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
CHAPITRE 10
Lettrines ..................................................................................... 141
Méthode standard : le pseudo-élément :first-letter . . . . . . . . . . . . . . . . . . . . . . . . 141
Variante pour anciens navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
© Groupe Eyrolles, 2005
XIII
Quand positionner en relatif ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Quand positionner en absolu ou en fixe ? . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Quand positionner en flottant ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Tableau récapitulatif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
TROISIÈME PARTIE
Travaux pratiques ......................................................123
CHAPITRE 8
Centrage des éléments en CSS ................................................. 125
Centrage des éléments de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Centrage horizontal des éléments de contenu . . . . . . . . . . . . . . . . . . . . . . . . 126
Centrage vertical des éléments de contenu . . . . . . . . . . . . . . . . . . . . . . . . . . 127
La méthode vertical-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
La méthode line-height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Centrage des blocs et conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Centrage horizontal des conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Centrage dans le flux courant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Centrage en positionnement absolu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Centrage vertical des conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
CHAPITRE 9
Précharger des images .............................................................. 135
Principe et utilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Masquer les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Application à une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Application à un ensemble d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
L’affichage hors de la zone de visualisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Accessibilité de ces techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
CHAPITRE 10
Lettrines ..................................................................................... 141
Méthode standard : le pseudo-élément :first-letter . . . . . . . . . . . . . . . . . . . . . . . . 141
Variante pour anciens navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147