Anleitung zum erstellen druckerfreundlicher Seiten !

[Snoopy]

Auf mehrfache Nachfrage:

Druckerfreundliche Seiten:

Eine kleine Abhandlung zum erstellen von Druckefreundlichen Seiten:
Dupliziert eure format.css und nennt die kopie z.B. format_p.css
In die format_p.css baut ihr nun einen zusätzlichen Eintrag ein:

Code: Alles auswählen

.print {
	display: none;
	height: 100%;
	width: 0px;
}

In euer layout baut Ihr bitte folgendes im Head ein:

Code: Alles auswählen

 <link rel="stylesheet" type="text/css" href="css/format.css" media="screen">
 <link rel="stylesheet" type="text/css" href="css/format_p.css" media="print">
 

Jetzt müsst Ihr nur noch alle eure Layout Tabellen die Ihr beim Ausdruck nicht sehen wollt
(Also z.B. für die Tabelle in der die Navigation ist) mit der class print versehen,
also etwa so:

Code: Alles auswählen

 <tr class="print"> 

Wenn Ihr nun noch irgenwo einen Druckbutten setzen wollt, könnte das in etwa so
aussehen:

Code: Alles auswählen

 <a href="javascript:self.print()"><img src="images/print.gif" border="0">[print]</a> 

Übrigens in der format_p.css können natürlich die größen und farben für texte etc. geändert
werden um sie für den Ausdruck zu optimieren.

[emergence]

im contenido-faq findet sich ebenso eine angehängte datei
-> http://www.thilo-sommer.de/PHPMyFAQ/ind ... 12&lang=de

[cyaneo]

Wenn gewisse Bereiche (z.B. die Navigation) des zu druckenden Dokuments nicht angezeigt werden sollen, reicht ein Eintrag im "format_p.css" Stylesheet, der so aussehen könnte:

Code: Alles auswählen

/* blendet Teile der Seite aus */
#navigation, 
#header, 
#sidebar, 
#sidebar h2, 
#sidebar div, 
#sidebar div.nav    { 
background-color:transparent;
display:none;}

Werden Links im Dokument angezeigt, hilft es nicht viel, wenn nur "weiterführende Links zum Artikel finden Sie hier" steht. Man kann im ausgedruckten Dokument mit

Code: Alles auswählen

/* Zeigt die vollen Links an */
a:after, a:link:after  { 
color: #000;
background-color:transparent; 
}
a:visited:after {
color:#000; 
background-color:transparent;
content: " * Link " attr(href) "* "; }

die volle URL hinter den Links anzeigen lassen.

Das Ergebnis sieht dann in Etwa so aus:

"weiterführende Links zum Artikel finden Sie hier *Link http://www.domain.at/neues_dokument.htm"