En-tête du document
CHAPITRE 16
213
Style de l’image décorative
Le grimoire symbolisant le manuel prendra place à droite du bandeau, quelle que soit
la dimension de la fenêtre. Deux méthodes pertinentes sont possibles :
• Positionner absolument, avec les propriétés right et top, la balise![]()
située
dans l’élément d’identifiant header.
• Positionner cet élément![]()
en flottant avec la propriété float, l’instruction
margin décalant l’image où souhaité.
La seconde, plus proche du flux, aura notre préférence, et le document restera compréhensible en l’absence de styles :
Style du titre général
Le titre « Alsacréations, le livre » ne doit être pris en compte que par les navigateurs
incapables de restituer les graphiques, car l’image de fond propose déjà le titre
« Alsacréations ».
Des diverses méthodes étudiées pour cacher du contenu aux navigateurs graphiques
sans trop gêner les autres, nous retiendrons ici la déclaration text-indent: -5000px.
Rappelons qu’elle engendre un retrait à gauche « poussant » le titre hors de la zone de
vision.
Tous les éléments de type bloc, à l’exception de
CHAPITRE 16
213
Style de l’image décorative
Le grimoire symbolisant le manuel prendra place à droite du bandeau, quelle que soit
la dimension de la fenêtre. Deux méthodes pertinentes sont possibles :
• Positionner absolument, avec les propriétés right et top, la balise
dans l’élément d’identifiant header.
• Positionner cet élément
margin décalant l’image où souhaité.
La seconde, plus proche du flux, aura notre préférence, et le document restera compréhensible en l’absence de styles :
Style du titre général
Le titre « Alsacréations, le livre » ne doit être pris en compte que par les navigateurs
incapables de restituer les graphiques, car l’image de fond propose déjà le titre
« Alsacréations ».
Des diverses méthodes étudiées pour cacher du contenu aux navigateurs graphiques
sans trop gêner les autres, nous retiendrons ici la déclaration text-indent: -5000px.
Rappelons qu’elle engendre un retrait à gauche « poussant » le titre hors de la zone de
vision.
Tous les éléments de type bloc, à l’exception de
, possèdent par défaut des
marges internes et/ou externes différentes d’une navigateur à l’autre. C’est notamment le cas de
marges internes et/ou externes différentes d’une navigateur à l’autre. C’est notamment le cas de
. Laissé en l’état, il induirait des décalages dépendant du navigateur. Supprimons toutes ses marges ; annulons aussi la hauteur de ligne (lineheight) pour éviter tout décalage avec l’élément
suivant.
#header img {
float: right;
margin: 5px 5px 0 0;
}
#header h1 {
text-indent: -5000px;
margin:0;
line-height: 0;
}