Verständnisproblem mit @media print

[roger]

Hallo,

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

Meine Idee,.... die nicht funktioniert.

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

<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
3. drucke nur Grafikbereich, sonst nicht's

Gruß
        roger

[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

[roger]

Abend,

vielen Dank für die schnellen Tip's. Funktioniert sehr gut.
Ich habe nun einen Bereich den ich zwar auf der Webseite habe, aber nicht drucken will.

----------------------------------------------------------------
Tabelle
----------------------------------------------------------------
Grafik

----------------------------------------------------------------

Beim drucken habe ich die Tabelle ausgeschaltet was auch funktioniert.
Jedoch bleibt der Platz frei.
Kann ich es nicht so machen, das alle "druckbaren" zusammenrücken
d.h. Grafik nach oben rutscht auf dem Ausdruck, wo der Freiplatz von der Tabelle ist.
Sonst habe ich Löcher auf dem Ausdruck was sehr dumm aussieht.

Danke
        roger

[Auge]

Hallo

---

Tabelle

Grafik

---

Beim drucken habe ich die Tabelle ausgeschaltet was auch funktioniert.
Jedoch bleibt der Platz frei.
Kann ich es nicht so machen, das alle "druckbaren" zusammenrücken
d.h. Grafik nach oben rutscht auf dem Ausdruck, wo der Freiplatz von der Tabelle ist.

Wie (mit welcher Anweisung) hast du die Tabelle ausgeblendet? Das hört sich irgendwie nach visibility:hidden; an.

Tschö, Auge

[roger]

Hallo

Wie (mit welcher Anweisung) hast du die Tabelle ausgeblendet? Das hört sich irgendwie nach visibility:hidden; an.

<style type="text/css">
@media print
{
 table, .menu {display:none;}
 @page {size:landscape;}
}
</style>

Somit ist alles was Tabelle und "class=menu" ist, ausgeblendet auf dem Ausdruck.
Wie kann ich aber die Lücke die mir die Tabelle lässt füllen, in dem ich alles was nach der Tabelle kommt nach "oben" rücke ??

roger

[Auge]

Hallo

<style type="text/css">
@media print
{
table, .menu {display:none;}
@page {size:landscape;}
}
</style>

Sieht so erstmal normal aus.

Somit ist alles was Tabelle und "class=menu" ist, ausgeblendet auf dem Ausdruck.
Wie kann ich aber die Lücke die mir die Tabelle lässt füllen, in dem ich alles was nach der Tabelle kommt nach "oben" rücke ??

Solange zu position nichts von static abweichendes angegeben wurde, sollten die nach der Tabelle notierten Elemente von selbst nach oben rücken, wenn die Tabelle ausgeblendet ist. Hast du vielleicht bei einem der Elemente mit position:...; gearbeitet (meine erste Vermutung, bin selbst mal drauf hereingefallen)?

Tschö, Auge

[roger]

Hallo

der Elemente mit position:...; gearbeitet (meine erste Vermutung, bin selbst mal drauf hereingefallen)?

genau so ist es "position:absolute"
gut ich habe nun folgendes geschrieben, zum testen.

@media print
{
table, .menu {display:none;}
@page {size:29cm 21cm; margin:0.5cm 0.5cm 0.5cm 0.5cm;}
.druckbereich {position:relative;top:-210;left:5px; width:10cm; height:10cm}
}

Und meine Grafik wird nach "oben" geschoben. Soweit, so gut.
Jetzt möchte ich meine Grafik noch genau auf die Seite bringen "skalieren"
Dazu habe ich die Seitengröße direkt angegeben und einen Seitenrand von 0.5cm umlaufend und die Größe mit 10x10 cm angegeben. Das interessiert die Grafik gar nicht. Es wird immer ein Seitenabstand von ca. 2 cm gehalten und die Grafik wird nicht auf die 10x10cm "skaliert"

Hast du da noch einen Tip.

Gruß
         roger

[Beat]

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

Meine Idee,.... die nicht funktioniert.

Lasse deine Idee etwas durch Norm gerechte Anleitung erweitern:
http://de.selfhtml.org/css/formate/einbinden.htm#media

mfg Beat