Verständnisproblem mit @media print

[Auge]

Hallo

ich zeichne mittels Javascript ein Diagramm. Wenn ich nun die Webseite mit dem Diagramm drucken will, sollte nur das Diagramm gedruckt werden.

<style type="text/css">
@media print druckbereich{size:landscape;}
div.druckbereich {print}
</style>

Dass die Werte für Druck-CSS von den verschiedenen Browsern sehr unterschiedlich unterstützt werden, ist dir bekannt?

http://de.selfhtml.org/css/eigenschaften/printlayouts.htm
http://aktuell.de.selfhtml.org/artikel/css/drucklayout/

<div class="druckbereich" id="myCanvas" style="position:relative;height:100px;width:100px;"></div>

In den "id=myCanvas" zeichne ich mein Diagramm.

Ich hoffe ich habe es etwas verständlich herübergebracht.

1. Definierter "Grafikbereich" myCanvas
2. zeichne Diagramm in Grafikbereich

Funktioniert das bis hierhin? Mit dem Ausdruck hat das nämlich erstmal nichts zu tun.

3. drucke nur Grafikbereich, sonst nicht's

Dann blende alle anderen Elemente mit display:none; aus.

Achtung: Blendest du ein beliebiges Element aus, werden dessen sämtliche Inhalte ebenfalls ausgeblendet. Das gilt natürlich auch für ein eventuell vorhandenes Elternelement von #myCanvas.

Tschö, Auge