picture picture
mars 17, 2005 CSS 0 Commentaire

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 )”

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: