CSS 2 – Pratique du design web
© Groupe Eyrolles, 2005
XIV
CHAPITRE 11
Afficher et masquer .................................................................. 149
Les comportements dynamiques en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Afficher et masquer des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Limitations dues aux navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Première application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
COMPROMIS Théorie et pratique du display: none . . . . . . . . . . . . . . . . . . . . . . . 151
Autres applications et perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Commenter le survol des menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Des infobulles personnalisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Légender le survol de photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Variante utilisant la propriété visibility . . . . . . . . . . . . . . . . . . . . . . . . . . 158
EXCÈS DE ZÈLE Quand les navigateurs en mode texte font pire que mieux . . . . . 158
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
CHAPITRE 12
Construire un menu en CSS ...................................................... 159
Les différents systèmes de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Utilisation de listes non ordonnées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Créer un menu vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Créer un menu sous forme de boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Produire un effet de relief sur les boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Créer un menu horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Alignement avec la propriété display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Alignement avec la propriété float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Créer un menu avec puces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Puces graphiques personnalisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Recourir aux images d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Pour aller plus loin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
CHAPITRE 13
Images réactives et menus graphiques ................................... 177
Une image réactive : première méthode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Accessibilité de cette technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Temps de latence et préchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Une image réactive : seconde méthode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
CULTURE Les formats d’image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
© Groupe Eyrolles, 2005
XIV
CHAPITRE 11
Afficher et masquer .................................................................. 149
Les comportements dynamiques en CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Afficher et masquer des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Limitations dues aux navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Première application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
COMPROMIS Théorie et pratique du display: none . . . . . . . . . . . . . . . . . . . . . . . 151
Autres applications et perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Commenter le survol des menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Des infobulles personnalisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Légender le survol de photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Variante utilisant la propriété visibility . . . . . . . . . . . . . . . . . . . . . . . . . . 158
EXCÈS DE ZÈLE Quand les navigateurs en mode texte font pire que mieux . . . . . 158
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
CHAPITRE 12
Construire un menu en CSS ...................................................... 159
Les différents systèmes de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Utilisation de listes non ordonnées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Créer un menu vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Créer un menu sous forme de boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Produire un effet de relief sur les boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Créer un menu horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Alignement avec la propriété display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Alignement avec la propriété float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Créer un menu avec puces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Puces graphiques personnalisées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Recourir aux images d’arrière-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Pour aller plus loin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Application pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
CHAPITRE 13
Images réactives et menus graphiques ................................... 177
Une image réactive : première méthode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Accessibilité de cette technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Temps de latence et préchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Une image réactive : seconde méthode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
CULTURE Les formats d’image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183