Ränder ändern beim Drucken

[Kalle_B]

Hallöle,

ich habe einen Header, der beim Drucken nicht erscheinen soll. Stattdessen soll der Text oben auf der Seite beginnen. Es wird jedoch der Platz des Headers freigelassen. Getestet mit FF und IE5.

Per externer CSS- Datei definiere ich u.a. zwei Container:

#fix_oben {
  position:     absolute;
  height:       10%;
  width:        100%;
}
#scroll_a {
  position: absolute;
  width:    100%;
  top:      11%;
  height:   89%;
  overflow: auto;
}

In der HTML- Datei gebe ich an:

<style type="text/css" media="print">
...
#fix_oben {display:none}
#scroll_a {
  left:     0;
  width:    100%;
  top:      0;
  height:   300%;
}
</style>

Die Angaben left, top und height für den Druck werden ignoriert, auch mit dem Zusatz !important.

Lieben Gruß, Kalle

[Steel]

Hiho.

zuerstmal sieht daein code ok aus. Display:none sollte schon dafuer sorgen, das besagter Header nicht da ist.

Warum hast du das CSS in der Datei und nicht auch extern? Schonmal versucht?

[Kalle_B]

Hiho.

Warum hast du das CSS in der Datei und nicht auch extern? Schonmal versucht?

Nein, da nur die Satzungs- Seite beim Drucken anders aussehen soll. Aber ich denke noch mal drüber nach.

[Steel]

Kannst es ja nur in die Satzungsseite einbinden.

[Ingo Turski]

Hi,

In der HTML- Datei gebe ich an:

<style type="text/css" media="print">
...
#fix_oben {display:none}
#scroll_a {
  left:     0;
  width:    100%;
  top:      0;
  height:   300%;
}
</style>

Die Angaben left, top und height für den Druck werden ignoriert, auch mit dem Zusatz !important.

wo steht hier !important? Und wo stehen diese Style-Angaben im Quelltext? Nach denen für screen?

Abgesehen davon: für den Druck ist position:absolute meist unsinnig. Definiere besser:
#scroll_a { display:static; width:auto; height:auto; }

freundliche Grüße
Ingo

[Kalle_B]

Hi, Ingo,

wo steht hier !important?

Wollte euch nicht mit meinen verschiedenen Versuchen im Deteil nerven

Und wo stehen diese Style-Angaben im Quelltext? Nach denen für screen?

Ja, im HTML- Quelltext. Sie standen vor den screen- Angaben. Aber auch, wenn sie dahinter stehen, funzt es nicht.

#scroll_a { display:static; width:auto; height:auto; }

Ergebnis bleibt gleich schlecht.

Dies ist die Seite:
http://gewerbe-birkenau.de/satzung.php

Per Javascript wird eine CSS- Datei nachgeladen, wenn die Anzeigebreite größer ist als 50em. Dann erfolgt eine "Gestaltung" der Seite, die beim Drucken wieder zurückgenommen werden soll.

Bei unter 50em sieht die Seite ganz anders aus und der Druck ist in Ordnung.

freundliche Grüße, Kalle

[Ingo Turski]

Hi,

Und wo stehen diese Style-Angaben im Quelltext? Nach denen für screen?
Ja, im HTML- Quelltext. Sie standen vor den screen- Angaben. Aber auch, wenn sie dahinter stehen, funzt es nicht.

die Position ist bei gleicher Spezifität der Selektoren schon entscheidend.

#scroll_a { display:static; width:auto; height:auto; }
Ergebnis bleibt gleich schlecht.

sordy, mein Fehler - ich meinte natürlich position:static;

Dies ist die Seite:
http://gewerbe-birkenau.de/satzung.php

Per Javascript wird eine CSS- Datei nachgeladen, wenn die Anzeigebreite größer ist als 50em. Dann erfolgt eine "Gestaltung" der Seite, die beim Drucken wieder zurückgenommen werden soll.

ich habe die Seite mal ohne Javascript aufgerufen und abgesehen von dem unnötig breitem rechten Rand und Schöngeitsfehlern wie der fehlenden Schriftfarbe und "zu-sammen" stimmt die Druckansicht.

Abgesehen davon, dass "Sie sehen die vereinfachte Ansicht für Taschenrechner (Pocket-PC), da die Größe Ihrer Anzeigefläche nicht ermittelt werden kann." nun wirklich nicht schön ist, liegt Dein Problem wohl auch beim Javascript.

Aber ein paar Details:

<style type="text/css" media="print">  
html, body {margin:10mm}

führt zu 2cm Rand links und rechts. Zuzüglich zu den im Browser voreingestelltem Rand! Belasse die Randeinstellung dem Browser und gebe 0 an.

Du hast für #scroll_a overflow:auto; angegeben - auf Papier läßt sich aber nicht scrollen.. ;-)
Und selbst bei der Screendarstellung stört mich ungemein, dass mein Scrollrad nicht funktioniert.

#scroll_aa {  
  margin-left:  110px;  
  margin-right: 20%;  
  padding-left: 1em;  
}

auch das solltest Du zurücksetzen.

Und übrigens: die "Taschenrechner"-Darstellung sagt mir aufgrund der besseren Nutzbarkeit eher zu. Noch mehr, wenn ich den Schriftgrad erhöhe und die Navigation sonst in den Inhaltsbereich geht.

Gruß
Ingo

freundliche Grüße
Ingo

[Kalle_B]

Hi,

ich habe die Seite mal ohne Javascript aufgerufen und abgesehen von dem unnötig breitem rechten Rand und Schöngeitsfehlern wie der fehlenden Schriftfarbe und "zu-sammen" stimmt die Druckansicht.

Fehlende Schriftfarbe ??? Default sollte schwarz sein. Ohne Javascript ist da kein rechter Rand. Und "zu-sammen" ist mir bei der Korrektur durchgerutscht, kam aus dem Original.

Abgesehen davon, dass "Sie sehen die vereinfachte Ansicht für Taschenrechner (Pocket-PC), da die Größe Ihrer Anzeigefläche nicht ermittelt werden kann." nun wirklich nicht schön ist

Hast Recht, hatte ich für den Auftraggeber reingesetzt, der sich beklagte, dass das Hintergrundbild fehlt. Seine Anzeige war zu klein. Ich habs rausgenommen.

Aber ein paar Details:

<style type="text/css" media="print">

html, body {margin:10mm}

> führt zu 2cm Rand links und rechts. Zuzüglich zu den im Browser voreingestelltem Rand! Belasse die Randeinstellung dem Browser und gebe 0 an.  
  
Ja, ein ewiges Problem mit den Browser- Randeinstellungen, die nicht überschrieben werden können. Ich fahre meinen mit Null- Rand und dann wird beim Druck was abgeschnitten. Also lasse ich 10mm (zusätzlich) stehen.  

>   
> Du hast für #scroll\_a overflow:auto; angegeben - auf Papier läßt sich aber nicht scrollen.. ;-)  

Habe ich in overflow:visible; geändert und WHOW - Firefox druckt richtig.  
  

> Und selbst bei der Screendarstellung stört mich ungemein, dass mein Scrollrad nicht funktioniert.  

Das verstehe ich nicht. Bei mir "hakt" das Scrollen per Rad im Firefox, aber es geht. Auf einem anderen PC hat es nicht gehakt. Entweder war der schneller oder es ist ein Problem der Grafikkarte wg. mehrere Ebenen übereinander.  
  
Ich denke, der FF berechnet bei jeder Bewegung das Hintergrundbild neu, das ja mit height:100%; width:100%; angegeben ist. Wenn das fehlt (FF-Einstellung "Grafiken Laden AUS", klappt's prächtig, auch mir Rad.  
  

> ~~~html

#scroll_aa {  

>   margin-left:  110px;  
>   margin-right: 20%;  
>   padding-left: 1em;  
> }

auch das solltest Du zurücksetzen.

Ja, habe ich vollkommen übersehen.

Und übrigens: die "Taschenrechner"-Darstellung sagt mir aufgrund der besseren Nutzbarkeit eher zu. Noch mehr, wenn ich den Schriftgrad erhöhe und die Navigation sonst in den Inhaltsbereich geht.

Das mache ich auch öfter, wenn abends die Augen müde werden. Muss mir noch mal überlegen, wie die Navis in ihrer Kiste bleiben. Vielleicht mit overflow:hidden; - Nee, jedenfalls nicht beim FF. Auch mit overflow:scroll; wird innerhalb eines Wortes nicht geschnitten.

Ich danke dir, du hast mir sehr geholfen.

LG Kalle

[Ingo Turski]

Hi,

Fehlende Schriftfarbe ??? Default sollte schwarz sein.

meist ja. Aber man kann in jedem Browser Schrift- und Hintergrundfarbe voreinstellen - ebenso übrigens die Linkfarben. Und wenn Du nun einen Hintergrund definierst, solltest Du auch stets die dazu passende Schriftfarbe angeben. Stell Dir vor, ein User läßt sich nur-text-Seiten nostalgisch in bernstein auf schwarz anzeigen und Du kommst dann mit Deinem Gelb...

Ja, ein ewiges Problem mit den Browser- Randeinstellungen, die nicht überschrieben werden können. Ich fahre meinen mit Null- Rand und dann wird beim Druck was abgeschnitten. Also lasse ich 10mm (zusätzlich) stehen.

1. kann das gar nicht sein, denn sonst würden ja auch nur-text-Seiten im Druck abgeschnitten. Wenn etwas abgeschnitten wird, ist immer eine Breitenangabe bzw. margin/padding im Spiel, so dass die Seitenbreite nicht ausreicht.
2. hast Du 2*10mm angegeben.

Und selbst bei der Screendarstellung stört mich ungemein, dass mein Scrollrad nicht funktioniert.
Das verstehe ich nicht. Bei mir "hakt" das Scrollen per Rad im Firefox, aber es geht. Auf einem anderen PC hat es nicht gehakt. Entweder war der schneller oder es ist ein Problem der Grafikkarte wg. mehrere Ebenen übereinander.

Bei meinem alten Firefox 1.0.8 versagt das Scrollrad ja generell bei overflow. Aber auch im IE7 ließ sich das Scrollrad nicht nutzen. Gerade nochmal im IE7 getestet und wenn ich Javascript ausnahmsweise zulasse, funktioniert das Scrollrad nicht. Ohne Javascript schon, aber dann sehe ich eine leeres Hintergrundbild und nach Scrollen erst den nahezu unformatierten Inhalt.

Und übrigens: die "Taschenrechner"-Darstellung sagt mir aufgrund der besseren Nutzbarkeit eher zu. Noch mehr, wenn ich den Schriftgrad erhöhe und die Navigation sonst in den Inhaltsbereich geht.

Das mache ich auch öfter, wenn abends die Augen müde werden. Muss mir noch mal überlegen, wie die Navis in ihrer Kiste bleiben. Vielleicht mit overflow:hidden; - Nee, jedenfalls nicht beim FF. Auch mit overflow:scroll; wird innerhalb eines Wortes nicht geschnitten.

Aktuell wird die Navigation im Firefox von *zwei* Scrollbalken umrahmt.
Die optimale Lösung wäre eine passende Breite in em. Schau Dir meine Seiten oder dieses Beispiel in verschiedenen Schriftgrößen an...

freundliche Grüße
Ingo

[Kalle_B]

Hi,

Die optimale Lösung wäre eine passende Breite in em.

Auf keinen Fall. Dann verdrängt die größer werdende Navi- Leiste den Text.

Na gut, du löst das, indem der Text waagerecht über die Navis scrollt, muss ich mal drüber nachdenken.

LG Kalle