ID: 92

Druckansicht mit CSS erstellen

Nicht Jedem liegt es lange Texte am Bildschirm zu lesen. Darum ist es von Vorteil, wenn die Webseite auch als Druckansicht zur Verfügung steht. Mit einer zusätzlichen druck.css gibt es einfachere, schnellere Möglichkeiten Websites für den Druck zu formatieren, die zudem auch keinen Traffic generieren.

Navigationsleisten, Banner und sonstige Werbung wird für eine Druckansicht nicht benötigt und können somit ausgeblendet werden.

Wie kommt das Stylesheet zum Drucker

Damit das für den Druck optimierte Stylesheet auch zum Drucker gelangt, tragen Sie auf jeder Seite im header folgende Zeile ein:

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

Jede Seite sollte nach einem bestimmten Schema aufgebaut sein, damit sich Elemente, die in der Druckansicht nicht benötigt werden, leichter ausblenden lassen.

Navigation und Werbeeinblendungen sind zum Beispiel Elemente, die in einer Druckansicht nicht benötigt werden. Diese werden innerhalb von <div> Tags gesetzt und mit einer id versehen.

<html>
<head>
<title>Ihre Titelzeile</title>
<link rel="stylesheet" type="text/css" media="print" href="druck.css"
</head>
<body>
<div id="header">
Hier die Kopfinformationen eintragen</div>
<div id="navigation">
Ihre Navigation</div>
<div id="content">
Hier Ihr Inhalt der Seite zum drucken</div>
<div id="footer">
Ihre Fusszeile</div>
</body>
</html>

druck.css

Die druck.css kann mit folgenden Formatierungen versehen werden.

body {
background-color: transparent;
font-size: 12pt;
font-family:'Times New Roman',Times,serif;
color:#000000; }

Unerwünschte Elemente ausblenden

Beim Ausdruck sind Hintergrundbilder sowie Werbebanner und search Buttons unerwünscht. Lesbarkeit und Tintenverbrauch sind 2 der Gründe. <div> Elemente können mit display:none; ausgelendet werden.

#navigation {
background-color:transparent;
display:none;}

Ränder

Wenn padding und margin auf 0px eingestellt sind, wird sichergestellt, dass der Text die ganze Breite des Papiers nutzt. Beim Bildschirm wäre das sinnlos.

#content {
background-color:transparent;
padding: 0px;
margin: 0px;
}

Hyperlinks

Damit ein Link auch im Ausdruck Sinn macht, setzt man mit dem Pseudo-Element:after und der Eigenschaft:content die komplete URL des Hyperlins neben den Verweis. Diese Eigenschaft geht zur Zeit im Mozilla und im Safari, sollte aber dafür auch eingesetzt werden.

a:after, a:link:after {
font-weight: bold;
text-decoration:none;
}
a:visited:after {
content: " * Link " attr(href) "* ";
}

Seitenumbrüche

Mit page-break-after:always; kann ein Seitenumbruch erzwungen werden. Mit avoid wird ein Seiteumbruch verhindert.

Hier noch weitere Möglichkeiten wie Seitenumbrüche angegeben werden können.

page-break-after:always;
page-break-before:always;
page-break-after:avoid;
page-break-before:avoid;

eingestellt am: 08.11.2005 (6569 mal gelesen)

Druckansicht | Übersicht CSS | zurück

Oktober 2008