Drucken mit CSS

Gawan · 27. September 2006, 15:31

Abend !

Ich habe gelesen dass es mit CSS möglich ist die Darstellung einer Seite an das Ausgabemedium anzupassen. Wenn ich das nicht komplett falsch verstanden hab kann ich damit z.B. einen String
"Hello World"
so formatieren dass er mir im Browser in Schriftgröße 10 angezeigt und am Drucker mit Schriftgröße 15 ausgedruckt wird.

Ist das richtig bzw. hat vielleicht jemand einen kleinen Beispielcode für sowas ?

Danke
Gawan

Torben Brodt · 27. September 2006, 15:36

ja, ne..

also mit CSS kannst du den style verändern
aber du kannst nicht erkennen, wer danach fragt

in abhängigkeit vom stylesheet kannst du eine html seite komplett anders aussehen lassen
du könntest also CSS in der hallo.html so einbinden
<link rel="stylesheet" href="style.css" type="text/css" />

in der hallo-print.html aber so
<link rel="stylesheet" href="print.css" type="text/css" />

aber les dich am besten selbst ein
selfhtml ist ein guter anfang

eLKane · 27. September 2006, 15:47

Wenn du nur eine Datei erstellen möchtest, die jedoch auf anderen Medien (Drucker, PDA) anders erscheinen soll, könnte dies zB. wie folgt aussehen:

Quellcode

<link rel="stylesheet" media="screen" href="style.css">
<link rel="stylesheet" media="print, embossed" href="print.css">
<link rel="stylesheet" media="handheld" href="pda.css">

Dort unter den Dateien einfach dann deine Styles definieren

Weitere Informationen
[1] de.selfhtml.org/css/formate/einbinden.htm#link_media

Torben Brodt · 27. September 2006, 17:38

uff.. das ist bitter
warum weiß ich sowas nicht? seit jeher biete ich eine extra seite für den druck an

(was aus usability gründen bestimmt auch nicht schlecht ist, wenn man es zusätzlich anbietet, da nur wenige user wirklich glauben sie können webseiten problemlos drucken)

Gawan · 27. September 2006, 18:31

Lassen sich da auch so Sachen realisieren wie:

Ansicht im Browser: Tabellenbreite 300
Ansicht am Drucker: Tabellenbreite 600

??

Torben Brodt · 27. September 2006, 18:48

ja, klar

les dich mal bei selfhtml ein..
CSS ist sehr einfach!

für die tabelle müsstest du nur folgendes in die print.css schreiben

Quellcode

table {
width:300px;
}

PowerPeter · 27. September 2006, 22:52

selfhtml.org finde ich ziemlich unübersichtlich. Schau dich mal auf www.css4you.de um.
Da ist alles wirklich einfach erklärt und es gibt dort eine sehr gute Einleitung, mit der man mit CSS starten kann.

Gawan · 28. September 2006, 14:59

Naja, ich hab mir jetzt einen Style für meine Tabelle einmal für den Bildschirm und einmal für den Drucker definiert:

screen.css table { overflow:#auto;height:#10px; width:#10px; }
print.css table { height:#10px; width:#10px; }

an der Darstellung ändert sich aber gar nix - er übernimmt aber die werte aus dem style sheet auch gar ned sondern macht die tabelle beliebig groß

eLKane · 28. September 2006, 15:28

Quellcode

@media screen {
table {
overflow: auto;height:10px; width:10px;
}
}
@media print {
table {
height:10px; width:10px;
}
}

Vieleicht in der Referenz etwas weiterlesen...so 2 Punkte weiter...
und wofür sind die # Raute Zeichen?

Gawan · 28. September 2006, 16:12

Naja, in der Referenz steht dass sich ein CSS-Statement so zusammensetzt:

Typ, Doppelpunkt, Raute, Wert

edit: aber danke, das funktioniert jetzt schon genauso wie es soll :lol: :lol:

Drucken mit CSS

Drucken mit CSS

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags