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 :  Serveur dédié : configurer Webmin en TLS avec un certificat SSL

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.

Pour développer votre projet WordPress ou Woocommerce, faites appel à mon expertise pour réaliser un site rapide, performant et fonctionnel.

Contactez-moi

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte en question et en appuyant sur Ctrl + Entrée s’il vous plaît.

Articles en rapport:

Créer une feuille d'impression CSS pour votre site

par Matt Lecture: 2 min
0

Pin It on Pinterest

Share This

Spelling error report

The following text will be sent to our editors: