Une fois que l’on a fini de designer son site pour que tout le monde puisse le consulter et admirer vos talents d’artiste vient le moment de penser à la manière dont votre site est rendu lors de l’impression. En effet, votre site n’est jamais imprimé sur une feuille tel que vous le voyez à l’écran. Si votre design utilise les feuilles de style (CSS), il suffit d’en créer une destinée à l’impression.

Le principe

Faîtes une copie de la feuille CSS de votre site et nommez-la print.css par exemple. Décidez ensuite quelles sont les parties qui sont superflues lors d’une impression papier : les menus peuvent être ignorés, tout comme les images de fond :

/* désactivation des menus pour l'impression */
.menu-right {
	display : none;
}
.menu-left {
	display : none;
}

Ensuite, il est important de fixer tous les éléments flottants : si vous laissez votre contenu dans un conteneur flottant (en utilisant la propriété float) seule la première page sera imprimée et le reste sera superbement ignoré. Remplacez donc tous les float des conteneurs que vous voulez imprimer par float: none !important;.


/* fixation du contenu flottant */
/* supprime le bug qui imprime la 1ère page seulement */
.columns-float {
     float: none !important;
     width: 100%;
}

Edition CSS live: l’extension WebDeveloper pour Firefox

Si vous utilisez Firefox, je recommande vivement l’utilisation de l’extension WebDeveloper pour mener à bien tous les travaux sur les feuilles du style : vous pouvez visualisez vos modifications en direct, sans avoir à uploader vos modifications par FTP. Et vous pouvez voir le rendu de votre CSS d’impression en un clic. Bonne impression !

A lire :  PHP : configurer un pool PHP pour chaque site

Remerciements

Je tiens à remercier les différents visiteurs qui m’ont informé que la CSS d’impression de SkyMinds.Net était défectueuse et n’imprimait que la première page des articles. C’est cette correction de conteneurs flottants qui a inspiré la rédaction de cet article, en espérant que cela aide quelques personnes.

Si vous avez trouvé une faute d’orthographe, veuillez nous en informer en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée .

Articles en rapport:

Matt
Author

Matt est formateur, développeur expert WordPress et WooCommerce, et administrateur réseau chez Codeable.

Écrire un commentaire

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :