PRATIQUE CLIENTS WEB 
Contrôler la mise en page de l'impression avec CSS2
 
Avec les feuilles de style, il est possible de spécifier des sauts de page lors de l'impression de documents HTML. (07/03/2005)
  Forum

Réagissez dans les forums de JDN Développeurs

Grâce aux spécifications CSS, le développeur-webmaster peut définir des styles non seulement pour un écran (utilisation Web), mais également pour un support mobile ou, plus simplement, un support papier.

Mais dans ce dernier cas, si l'on veut spécifier que des éléments du document HTML doivent se trouver en début ou en fin de page, afin de forcer, lors de l'impression, une coupure (saut de page) à un endroit précis, il faut utiliser les versions 2 et suivantes de CSS. Entrent en jeu les règles page-break-before et page-break-after. Ainsi, par exemple :

<style>
h1 {
  page-break-before: always;
  }
</style>


... place tous les en-têtes en début de page. Que l'élément précédent soit court ou long, il ne sera pas immédiatement suivi par l'élément h1 sur la feuille, celui se trouvant sur la feuille suivante.

De même :

<style>
.basdepage {
  page-break-after: always;
  }
</style>


... oblige l'élément visé à se trouver en bas de page.

On peut ainsi facilement préciser où se fera la coupure dans le document HTML :

<div style="page-break-after: always;"></div>


Tout élément suivant cette balise DIV se trouvera sur la page suivante...


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page