Fiche CSS: Impression

Objet de la fiche : Correction exercice

 Retour au cours

Rappel de l'exercice

Le but de l'exercice est de pouvoir imprimer (via la commande imprimer du navigateur) uniquement les informations concernant la Boutique du Fleuriste au niveau de la page d'accueil (index.html). Il s'agit en fait de récupérer une partie des informations contenues  dans la fenêtre qui apparaît lors du survol du titre ("Bienvenue sur ...), et de l'imprimer sous forme de carte de visite.

Il faudra pour cela créer une feuille de style externe de type "print" adaptée au résultat que l'on veut obtenir.

Pour obtenir le résultat suivant lorsque l'on demande l'impression de la page web : | La Boutique du Fleuriste.pdf |

Correction

Feuille de style externe dédiée à l'impression : CSSExternePrint.css

/* style de référence */
@page{size:portrait;margin-left:2cm;margin-right:2cm}

html {font-size:100%}
body {font-size:0.8em;font-family:'times new roman',times,serif;
color:black;margin:0em; }

/* Arrière plan */
body {background-color:white}

/* style de base */
#titreSite{font-size:1.4em;text-align:center}
#titreSite img {vertical-align:middle;padding-left:0.5em}

/* Centrage */
#Site {width:65%;margin:auto;}

/* Liste Choisissez et commandez */
#BoiteChoix {display:none}

/* Tableau des images */
#BoiteCatalogue {display:none}

/* Fenêtre informations */
#Entete {font-size:1em;}

#Entete #boiteInfoBoutique {margin:0em;
padding:0.5em;font-family:'times new roman'}

#Entete #TitreBoiteInfoBoutique {text-align:center;font-size:1.4em;padding:0.5em}

#Entete #boiteInfoBoutique .contenuInfoBoutique {clear:both}
#Entete #boiteInfoBoutique .contenuInfoBoutique img {float:left;padding:0.5em;margin:0em}
#Entete #boiteInfoBoutique .contenuInfoBoutique p {padding:0.5em;margin:0em;text-align:left}

Insertion dans la page index.html

<link rel="stylesheet" type="text/css" media="print" href="CSS/CSSExternePrint.css" />

Résultat