CSS
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 05.12.2019
     
Druckversion mit Style Sheets

Um Druckversionen Ihrer Seiten anzubieten, brauchen Sie weder jede Seite doppelt zu erstellen, noch komplexe Methoden wie PHP, etc zu verwenden - für viele Zwecke reichen CSS (Cascading Style Sheets) aus.

Hinweis: Diese Technik funktioniert nur im Internet Explorer ab Version 4.x und Netscape 6.x.


Seitenelemente vom Druck ausschließen

Nicht immer ist es sinnvoll, dass beim Ausdrucken einer Webseite alles mitgedruckt wird, denn Navigationsmenüs und Suchmasken zum Beispiel werden auf dem Papier nicht benötigt. Auch das Drucken von Bildern, Countern, etc ist oft überfüssig und braucht nur Zeit und Tinte.
Mit CSS (Cascading Style Sheets) haben Sie die Möglichkeit, Teile Ihrer Seite vom Druck auszuschließen. Gehen Sie dazu wie folgt vor:
  1. Schließen Sie die Seitenteile, die nicht gedruckt werden sollen in <div class="keindruck"> und </div> oder in <span class="keindruck"> und </span> ein.
  2. Fügen Sie zwischen <head> und </head> folgendes ein:
    <link rel="stylesheet" media="print" href="print.css">
  3. Erstellen Sie nun im gleichen Ordner die Datei print.css für die Style Sheet Angaben. Die Datei enthält nur Style Sheet Angaben für den Druck und sieht wie folgt aus:
    .keindruck { display:none; }
Hinweis: Diese Technik funktioniert im Netscape Navigator erst ab Version 6 und im Internet Explorer ab Version 4.


Seitenelemente nur beim Druck anzeigen

Am Computer lassen sich Links anklicken und in der Statuszeile des Browsers wird die URL angezeigt. Wird aber eine Seite mit Links ausgedruckt, so sind die Links nutzlos, schließlich kann man sie auf Papier nicht anklicken.
Nun könnten Sie am Ende der Seite alle Links mit Verweisadresse nocheinmal auflisten. Das würde aber bedeuten, dass die Links auf dem Bildschirm doppelt erscheinen würden: Einmal im Text und nocheinmal am Seitenende.
Auch hier helfen Style Sheets weiter. Damit können Sie erreichen, dass die Links am Seitenende zwar ausgedruckt, aber nicht am Bildschirm angezeigt werden. Gehen Sie wie folgt vor:

  1. Schließen Sie die Links am Seitenende, die nur auf Ausdrucken sichtbar sein solllen in <div class="nurdruck"> und </div> oder in <span class="nurdruck"> und </span> ein.
  2. Fügen Sie zwischen <head> und </head> folgendes ein:
    <link rel="stylesheet" media="screen" href="screen.css">
  3. Erstellen Sie nun im gleichen Ordner die Datei screen.css für die Style Sheet Angaben. Die Datei enthält nur Style Sheet Angaben für die Anzeige am Bildschirm und sieht wie folgt aus:
    .nurdruck { display:none; }