Tutorial

print.css - die druckbare Ansicht einer Seite

Für den Augenschmaus ist gesorgt: Fast jede Website hat einen Style. Ein schönes Layout mit ansprechender Hintergrundgrafik, einen indivuellen Header mit Logo und Motto, einen Footer und sonstigen Schnickschnack. Hübsch anzusehen ist sie ja - die Website. Die Arbeit ist getan, die Beine werden hochgelegt und zufrieden die Hände gerieben: "Was haben wir das fein gemacht!" Denkste! Die wenigsten Webmaster und -mistressen denken an die print.css, die für ein entsprechendes Erscheinungsbild beim Drucken sorgt. Mal unter uns: Wer will den ganzen Schnickschnack auf dem Ausdruck denn haben? All die bunten Bildchen und das Schnickschnack-Gedöhns?

Wir definieren eine druckbare Ansicht der Seite

Das Einbinden des Druck-Stylesheets geschieht - ebenso wie das Einbinden des "normalen" Stylesheets - im Kopfbereich der Seite:

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

In der print.css können wir nun Anpassungen vornehmen. Damit der User später nicht mit unnötigen Hintergrundbildern erschlagen wird, sollte man das Drucklayout von allen Hintergrundbildern befreien, eine für den Druck geeignete Schrift auswählen und die Schriftfarbe schwarz wählen:

body{
background-color: transparent;
background-image: none;
color:black;
}

Ebenso sollte man beim Ausdruck störende Elemente, ID´s oder Klassen ausblenden. Über display: none; ist dieses schnell umgesetzt:

/* Formulare, Eingabefelder oä werden auf dem Ausdruck nicht benötigt. Diese Elemente blenden wir aus: */
form {display: none;}
/* Die Klasse Navigation macht auf einem Ausdruck ebenfalls wenig Sinn. Weg damit! */
ul.navigation {display: none;}
/* Last but not least: Bestimmte IDs ausblenden */
div#header {display:none;}

Dieses Tutorial bewerten

zurück

Navigation einschalten