✔ Probleme mit css für print

[julchen]

Hallo,
ich habe eine extra css Datei angelegt für print. Diese ist zwar noch nicht ganz fertig, aber momentan hab ich zwei Probleme.

1. Das Hintergrundbild, welches ich in der Seite für den Bildschirm definiert habe, erscheint auch in der Druckvorschau, bwz. auf dem Ausdruck, obwohl ich dieses in der css Datei für print rausgenommen habe. Das ist beim ie 7 der Fall. Beim Firefox bringt er immer noch einen kleinen Teil des Hintergrundbildes. Woran liegt das?

2. Wenn die Seite vom Inhalt her größer ist, wie der Anzeigebereich stellt er immer nur eine Seite für den Druck bereit, den Rest der Seite lässt er einfach weg, ohne das man ihn drucken kann. Woran liegt dieses?

Hier das Beispiel: http://www.assedo.de/kunden/becker/index.html

Gruss
Julchen

 

[Maik]

Hi,

von welchem Hintergrund-Bild sprichst du?

Bei mir werden in der Druckvorschau lediglich alle im Dokument enthaltenden Grafik-Elemente (<img>) angezeigt.

Wenn du das Grafik-Element bg_body.jpg meinst, dann definiere es mal als Hintergrundbild für das DIV #box, um es dann in der style_becker_print.css "ausblenden" zu können.

Für das zweite Problem dürfte die absolute Positionierung der ID #box_right verantwortlich sein.

 

[Gumbo]

Du bindest die Hintergrundgrafik als normales Grafikelement ein und platzierst es nur hinter den anderen Elemente.
Das zweite Problem kann ich leider nicht nachvollziehen. Bei mir (Safari) wird die Webseite auf zwei A4-Seiten aufgeteilt.

 

[julchen]

Hallo,
ich kriegs nicht hin. Ich hab das Hintergrundbild nun in den Container #box verschoben. Trotzdem bringt er dieses noch in der Druckvorschau. Im ie7 definiert er mir den ganzen content noch nicht einmal mit einer weissen Hintergrundfarbe.

Und das er nicht alles druckt hab ich auch nicht hinbekommen. Im ie7 und FF2.0 kann ich nur eine Seite drucken.

Könntet Ihr bitte nochmal drüberschauen und mir sagen, was ich tun kann.

Gruss
Julchen

 

[Maik]

Hi,

das Grafik-Element mit der URI images/bg_body.jpg soll nicht in ein anderes <div>-Tag verschoben, sondern aus dem HTML-Code entfernt und stattdessen über die beiden CSS-Dateien als Hintergrundbild für das DIV #box "ein- u. ausgeblendet" werden.

In den Druckeinstellungen des Browsers gibt es zudem eine Option für den Ausdruck des "Hintergrunds", der "Hintergrundfarben und -bilder".

Zum fehlenden Seitenumbruch habe ich dir einen Tipp gegeben, den ich aber im "überarbeiteten" Stylesheet nicht finden kann.

 

[julchen]

Hallo,
wie blende ich das ganze den ein und aus. Dann muss ich das Hintergundbild doch in einen extra Container legen und den ganzen Container ausblenden. Oder mit welchem Befehl kann ich ein Hintergrundbild ausblenden? So ganz hab ich das immer noch nicht verstanden. Kannst Du mir mal den Code kurz anposten.

Das mit der absoluten positionierung hab ich rausgenommen, aber jetzt bringt er mir auf der ersten Seite das Hintergrundbild. Die restlichen Seiten werden angezeigt. Hat sich das dann erledigt wenn ich das Hintergrundbild raus hab.

Gruss und Danke
Julchen

 

[Maik]

<div id="box"><!--<img src="images/bg_body.jpg" alt="" />-->
        <div id="box_left">

style_becker.css:

#box{
        width:790px;
        margin:0 0;
        padding-top:0px;
        min-height:100%;
        height:auto !important; /* moderne Browser */
        height:100%; /* IE */
        text-align:left;
        background:#fff url(images/bg_body.jpg) no-repeat;
}

Und mit der Regel im Druckstylesheet sollte es dann hinhauen.

 

[julchen]

Hallo,
sorry, du hast Recht. Ich hatte vergessen, dass ich das image direkt in das HTML plaziert hatte.

Deine Änderungen habe ich gemacht. Leider bleibt jetzt immer noch das Problem, dass er auf der ersten Seite so viel Platz verschwendet und den Inhalt nicht nach oben plaziert.

Hast Du dafür eine Lösung?

Gruss
Holli

 

[Maik]

Du solltest im Print-CSS alle nicht-benötigten DIV-Boxen, wie z.B. #box_top2 für das Flash-File, ausblenden, damit der Inhalt weiter nach oben wandert.

 

[Quaese]

Hi,

mir ist aufgefallen, dass Du zum Ausblenden von Elementen visibility: hidden zu verwenden scheinst.
Ich würde die Eigenschaft display (mit dem Wert none) vorziehen, da bei visibility die Elemente zwar
ausgeblendet werden, der Platz dafür dennoch reserviert wird.

Ciao
Quaese