Imposer un saut de page en CSS ( uniquement à l’imprimante )
… parceque les pages web ne s’affichent pas comme des pages A4 …
Cette astuce ne fonctionne qu’avec les normes CSS2, et ne sera donc pas reconnue par les navigateurs de version antérieure à IE4 et N6.
Aucun problème avec IE6, Firefox ou N7. Pas testé sous Opéra.
Il suffit d’insérer les code suivant à l’endroit o๠l’on souhaite couper la page :
<!-- saut de page obligatoire -->
<div style="page-break-before:always; margin-top:2cm;">../..</div>
« page-break-before » impose à la mise en page de l’imprimante de ne rien afficher au dessus du calque div.
Il sera donc en haut de la nouvelle page, avec une marge de 2cm en top de page (précaution si l’utilisateur a ramené les marges d’impression à zéro sur son navigateur).
Ce code n’aura aucune incidence sur l’affichage à l’écran (à l’exception du ../.. , placé ici à des fins didactiques, et qui peut tout à fait être supprimé), seules les imprimantes l’interpréteront.
Source : SelfHTML
07/11/2005 : add-on :
on peut affiner le tout grace aux attributs de ce style :
auto
Insère un saut de page avant/après l’élément désigné, si ce saut est nécessaire
always
Insère un saut de page avant/après l’élément désigné
avoid
à‰vite d’insérer un élément de page avant/après cet élément
left
Insère un saut de page avant/après l’élément désigné, de manière à ce que la page suivante soit mise en forme comme une page de gauche
right
Insère un saut de page avant/après l’élément désigné, de manière à ce que la page suivante soit mise en forme comme une page de droite
Source : Journal du Net
No Responses to “Imposer un saut de page en CSS ( uniquement à l’imprimante )”