✔ Druckfunktion mit CSS

[Tucker]

http://tagesschau.de/aktuell/meldungen/0,1185,OID5867162_TYP6_THE_NAV_REF1_BAB,00.html

Wie macht man so eine Druckfuntion, wie beim angegebenen Link? Ein bekannte von mir meinte, dass sowas mit CSS gemacht wirde. Bei der Seite, sobald man auf Drucken klickt, wird nur der entsprechende Artikel gedruckt und nichts anderes.

Es muss mit CSS umgfesetzt wurden sein. An JavaScript liegt es nicht, da dort der Befehl standartmäßig window.print() lautet.

 

[Maik]

Alle übrigen Bereiche der Seite (Header, Navigation, Footer, u.ä.) werden in der CSS-Druckversion mittels display:none oder visibility:hidden "ausgeblendet", so daß nur noch der Artikel ausgedruckt wird.

Du kannst die beiden CSS-Printdateien dahingehend ja mal genauer unter die Lupe nehmen:

http://tagesschau.de/resources/css/ts_prim_print.css

http://tagesschau.de/resources/css/ts_sec_print.css

 

[mgraf]

Hallo,
einfach eine neue CSS Datei anlegen, die do so im Head Bereich einbindest:

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

dort gibst du einfach folgendes an:

#navigation,
.überschrift,
#linke_navigation {
display: none;
}

Uns schon sollte es beim Ausdrucken nicht mehr angezeigt werden.

Siehe auch hier:
http://de.selfhtml.org/css/formate/einbinden.htm#link_media

Lg

 

[Tucker]

Hab das nun mal ausprobiert. Ein Beispiel ist http://www.lommatzsch.net/entwicklung/details/n1255_trainingseinheit_bundesliga_zum_anfassen.html

Allerdings wird mir in der Druckvorschau alles angezeigt, was auch nicht angezeigt werden soll. Bin ratlos.
Denn normal, wenn ich mir die Seite anschaue, funktioniert es. Der Browser nutzt also die richtige CSS. Aber beim Druck bzw. der Vorschau scheint er auf gar keine der beiden CSS zuzugreifen.

 

[Maik]

http://www.lommatzsch.net/entwicklung/css/druck.css lautet die URI zur CSS-Druckdatei.

Im Dateinamen der referenzierten CSS-Datei fehlt aber das d, weshalb die druck.css nicht geladen wird

<LINK href="../css/ruck.css" rel="stylesheet" type="text/css" media="print, embossed"/>