69
Utilisation des effets d’arrière‑plan
padding-bottom: 1em;
}
.box-inner {
background: url(/img/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(/img/top-right.gif) no-repeat right top;
padding-top: 1em;
}
.box h2, .box p {
padding-left: 1em;
padding-right: 1em;
}
Dans.cet.exemple,.j’ai.défini.la.largeur.de.la.boîte.en.cadratins.(em)..La.boîte.peut.ainsi.
s’étendre.quand.l’utilisateur.augmente.la.taille.du.texte.dans.le.navigateur.(voir.Figure 4.9)..
Vous.pouvez.cependant.aussi.définir.cette.largeur.en.pourcentage,.afin.que.la.boîte.s’étende.
ou. se. contracte. en. fonction. de. la. taille. de. la. fenêtre. du. navigateur.. Il. s’agit. là. d’un. des.
principes.fondamentaux.des.mises.en.page.élastiques.et.liquides,.comme.nous.le.verrons.
ultérieurement..
Figure 4.9
Les boîtes flexibles à bords arrondis s’étendent à la fois horizontalement et verticalement quand le texte
change de taille.
L’ajout d’éléments non sémantiques n’est pas idéal. Si vous ne créez qu’une ou deux boîtes, ce n’est sans
doute pas gênant, mais si cela devient un problème, vous pouvez envisager d’insérer ces éléments supplémentaires en JavaScript. Pour plus de détails à ce sujet, consultez l’excellent article de Roger Johansson sur le site 456 Berea Street (en anglais), à l’adresse www.456bereastreet.com/archive/
200505/transparent_custom_corners_and_borders.