Créer un cadre arrondi
CHAPITRE 14
191
L’image d’arrière-plan de la figure 14-4 provisionne une hauteur suffisante et glissera
verticalement pour accompagner le bloc de texte. Structure de l’ensemble :
• Un bloc global (
CHAPITRE 14
191
L’image d’arrière-plan de la figure 14-4 provisionne une hauteur suffisante et glissera
verticalement pour accompagner le bloc de texte. Structure de l’ensemble :
• Un bloc global (
) contient l’ensemble du cadre (soit un bloc
interne englobant à son tour le contenu). Il a pour arrière-plan le chapeau de la
figure 14-3.
• Un bloc interne (
interne englobant à son tour le contenu). Il a pour arrière-plan le chapeau de la
figure 14-3.
• Un bloc interne (
) ne renferme que le contenu, avec pour
fond la figure 14-4 glissant pour s’adapter à la taille réelle du cadre.
• Un contenu, ici du texte (
CSS
div#cadre { /* conteneur global et chapeau de l’arrière-plan */
width: 230px;
padding-top: 30px;
background: url(haut.png) left top no-repeat;
}
fond la figure 14-4 glissant pour s’adapter à la taille réelle du cadre.
• Un contenu, ici du texte (
).
Une marge interne (padding) de la hauteur du chapeau et du pied évitera au contenu
de déborder sur ces parties haute et basse du cadre. On obtient alors un code proche
de celui qui suit :
Figure 14–3
Partie haute du cadre
Figure 14–4
Partie basse du cadre
HTML
Lorem ipsum dolor sit amet, …
CSS
div#cadre { /* conteneur global et chapeau de l’arrière-plan */
width: 230px;
padding-top: 30px;
background: url(haut.png) left top no-repeat;
}