Zur Navigation

Druckfreundliche Version

1 Marcel (Gast)

Hallo

Zu Übungszwecken habe ich mir folgendes Rechner-Script programmiert:

http://profiforum.com/lempix/einmaleins.rechner.htm

Nun möchte ich eine druckfreundliche Version des Ergebnisses. Wie genau mache ich so etwas?

***

09.02.2006 17:03

2 Jörg

Du könntest ein gesondertes Style Sheet für den Druck entwerfen. Das kannst du folgendermaßen im head-Bereich einbinden:

<link rel="stylesheet" media="print" href="druck.css">

In der CSS-Datei kannst du dann eine druckfreundliche Schriftart definieren, bestimmte Elemente ausblenden (z.B. Navigation) etc.

Beim Druck werden die Browser dann dieses Stylesheet berücksichtigen

09.02.2006 19:40

3 Marcel (Gast)

Meine eigentliche Idee ist es einfach die Zahlen auszugeben, ohne den oben angezeigten Text und Back-Link.

<link rel="stylesheet" media="print" href="druck.css">

Wenn ich diesen CSS-Code im Head-Bereich angebe, was wird dann gedruckt? Alles?

***

09.02.2006 19:42

4 Jörg

DAs kommt darauf an, wie das Style Sheet ausschaut.

als erstes müsstest du die Bereiche markieren, die ausgeblendet werden bzw. nicht ausgeblendet werden sollen. Du könntest die Zahlen z.B. in einen span der Klasse "zahl" unterbringen

<span class="zahl">3</span>

dann bindest du zwei Style Sheets ein, eins für den Monitor, eins für den Druck:

<link rel="stylesheet" media="screen" href="monitor.css">
<link rel="stylesheet" media="print" href="druck.css">

in monitor.css definierst du das "normale" Layout

body { font-family:Arial,sans-serif; }
.zahl { font-weight:bold; }

und in druck.css das Layout für den Druck.

body { font-family:'Times New Roman',serif; display:none; }
.zahl { font-weight:bold;display:inline; }

In dem Beispielcode werden über display:none alle Elemente ausgeblendet, über display:inline werden die Zahlen wieder eingeblendet

09.02.2006 20:05 | geändert: 09.02.2006 20:06

5 Marcel (Gast)

Ah. Wenn ich jetzt über einen Java-Script Button die Druckinformationen aufrufe und nichts an den Einstellungen ändere, dann wird <span> gedruckt?

***

09.02.2006 20:12

6 Jörg

Ja, das funktioniert auch ohne Java-Script Button - einfach mal ausprobieren, und die Druckvorschau im Browser aufrufen

Ich hab allerdings grad gemerkt, dass das Einblenden bei display:hidden so nicht funktioniert. Besser wäre es in der druck.css mit der CSS-Eigenschaft visibility zu arbeiten:

body { font-family:'Times New Roman',serif;visibility:hidden; }
.zahl { font-weight:bold;visibility:visible; }

dann wird beim Druck nur das span gedruckt

09.02.2006 20:23

Beitrag schreiben (als Gast)





[BBCode-Hilfe]