DerEinzige & traumfahne.de
zeitschrift zum selbstausdrucken im eigenverlag vom 14. 1. 2010 | gesamtausgaben: 194
css @ media print … beispiel mit erklärungen
14. Januar 2010 | ausgabe drucken | Kommentare deaktiviertleserbrief schreibendas stylesheet welches ich für dereinzige.de verwende gibt mir die möglichkeit für unterschiedliche ausgabetechniken unterschiedliche layouts zu wählen …
für den bildschirm, das was du im augenblick siehst und für den druck, das was kommt wenn du auf *ausgabe drucken* (ein paar zeilen höher 
) klickst.
eingebunden wird es durch:
<link rel="stylesheet" href="http://dereinzige.de/wp-content/themes/zeitschrift/style.css" type="text/css" media="screen, print" />
im <head> bereich des html dokuments
gehen wir das ganze im einzelnen durch:
@media screen {
das normale stylesheet für den bildschirm …
body {...}
h1{...}
und folgendes soll nicht angezeigt werden …
.noscreen, .noscreenhead, .noscreentitle { display: none }
}
@media print {
als erstes werden alle elemente die nicht mitgedruckt werden sollen durch komma getrennt aufgezählt. hier zeigt sich der vorteil von einem print css deutlich: der ganze menue kladeradatsch wird nicht mitgedruckt …
h1, .topnavi, .head, hr, .kleinschreibung, .banner, .landing, .head_fix, .gedicht, .prevnext, .kommentar, .foot, .topwetter, .footnavi, .noprint, small, .schriftnavi, .sociable, .sociable_tagline, .topsy_widget_shortcode, #crp_related, #sidebar_rechts, #sidebar_linksoben { display: none }
serifenschrift für den ausdruck steigert die lesbarkeit; ausserdem kein hintergrundbild, keine hintergrundfarbe (spart druckmittel … bin schliesslich schwabe 
) …
body { color: black; margin: 20mm; font-size: 9pt; font-family: Georgia, serif;background-color: transparent;background-image:none }
schriftartwechsel statt farbwechsel um links anzuzeigen …
a { color: black; text-decoration: none; background-color: inherit; font-size: 8pt;font-family: Helvetica, Arial, sans-serif; }
mit attr(href) ausdrucken wohin der link führt …
a:link:after, a:link:visited:after { content: " (link auf <" attr(href) ">) "; font-size: 8pt; color: #707070; background-color: inherit;font-family: Helvetica, Arial, sans-serif; }
mit attr(title) erklärungen einfügen die im <acronym title="..."> stehen …
acronym[title]:after{ content: " (acronym : <" attr(title) ">) "; font-size: 8pt; color: #707070; background-color: inherit }
in einem
<div class="noscreentitle">
befindlichen text ausdrucken, aber nicht auf dem bildschirm (siehe oben in @media screen) anzeigen …
.noscreentitle{color: black; background-color: inherit; font-size: 13pt}
dito …
.noscreenhead{color: black; background-color: inherit; font-size: 8pt;margin-bottom: 1cm;padding-bottom: 1em; border-bottom: 1pt dotted #a9a9a9 }
dito …
.noscreen{color: black; background-color: inherit; font-size: 8pt;margin-top: 1cm;padding-top: 1em; border-top: 1pt dotted #a9a9a9 }
einen sich wiederholenden text immer mit ausdrucken …
.noscreen:after{content:"impressum: DerEinzige & traumfahne.de, zeitschrift zum selbstausdrucken im eigenverlag, verleger und verantwortlicher redakteur: jeff brett, bismarckstr. 3, d-72810 gomaringen, redaktion@dereinzige.de, +49(0) 7072 3954"}
sonstiges …
.mahamudra{margin-bottom:5mm}
}
für fragen stehe ich gerne zur verfügung … frage stellen
autor: jeff brett, verfasst am 14. 1. 2010
permalink: http://dereinzige.de/2010/01/14/css-media-print-beispiel-mit-erklaerungen/
short url: http://dereinzige.de/742
