DerEinzige

gedanken zur illusorischen realität des einzigen und seines eigenthums ...
... Ausgabe 198 ... 12. Jhrg.

«« »»

rubrik: css markup webdesign

DerEinzige & traumfahne.de

zeitschrift zum selbstausdrucken im eigenverlag vom 14. 1. 2010 | gesamtausgaben: 198

css @ media print … beispiel mit erklärungen

14. Januar 2010 | ausgabe drucken     | email mail facebook f***book twit tw | leserbrief schreiben    

das 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 :D ) …

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

einen leserbrief schreiben

du mußt angemeldet sein, um kommentieren zu können.

«« »»

durchschnittlich 27 abonnenten täglich
leser: 1 online, 809683 gesamt seit dem 16.februar 2006.

home | editorial | über | datenschutz | impressum

springe zum seitenanfang