Druckstyles

[maggie]

Hallo,
bei einem dreispaltigen Layout habe ich die beiden äußeren Spalten ausgeblendet {display:none;},
die mittlere Spalte sollte nun die ganze Druckbreite (A4) ausfüllen.
Weder mit width: 100%; noch mit irgendwelchen Pixelangaben verändert sich die Druckausgabe.
Was muss noch beachtet werden?

Danke für Eure Hilfe.

Gruß
Maggie

[Ingo Turski]

Hi,

Weder mit width: 100%; noch mit irgendwelchen Pixelangaben verändert sich die Druckausgabe.
Was muss noch beachtet werden?

margin?
Oder andere Regeln, die wir nicht kennen.

freundliche Grüße
Ingo

[maggie]

Hi,
die drei Spalten liegen in einem Container, dem ich 100% width zugeordnet habe. die äußeren Spalten unsichtbar gestellt und auch dem mittleren Spalte 100% Breite erteilt.
Die Druckausgabe erfolgt so: die mittlere Spalte rückt zwar nach links aber ausgedruckt wird die mittlere Spalte in der Breite als ob die rechte und linke Spalte noch mitgerechnet würde. Es ist auch egal ob ich dem gesamten Container nur 50% Breite zuordne, das Ergebnis bleibt gleich.
???
Maggie

[Ingo Turski]

Hi,

die drei Spalten liegen in einem Container, dem ich 100% width zugeordnet habe.

abgesehen davon, dass die 100% bei Blocelementen überflüssig sind: wie hast Du die Boxen nebeneinander gesetzt?

freundliche Grüße
Ingo

[maggie]

Hi,

die drei Spalten liegen in einem Container, dem ich 100% width zugeordnet habe.
abgesehen davon, dass die 100% bei Blocelementen überflüssig sind: wie hast Du die Boxen nebeneinander gesetzt?

freundliche Grüße
Ingo

Hi!
die mittlere Spalte (die also noch übrig bleiben soll) hatte
float: left;
das hab ich aber rausgenommen.
und die rechte Spalte rechte Spalte hatte
float: right;

Gruß
Maggie

[Ingo Turski]

Hi,

die mittlere Spalte (die also noch übrig bleiben soll) hatte
float: left;
das hab ich aber rausgenommen.
und die rechte Spalte rechte Spalte hatte
float: right;

lass Dir doch bitte nicht jede Kleinigkeit einzeln aus der Nase ziehen. Die rechte Spalte ist wie positioniert und wie auf Abstand zur mittleren gehalten?

freundliche Grüße
Ingo

[maggie]

Hi,

die mittlere Spalte (die also noch übrig bleiben soll) hatte
float: left;
das hab ich aber rausgenommen.
und die rechte Spalte rechte Spalte hatte
float: right;
lass Dir doch bitte nicht jede Kleinigkeit einzeln aus der Nase ziehen. Die rechte Spalte ist wie positioniert und wie auf Abstand zur mittleren gehalten?

freundliche Grüße
Ingo

Sorry!
#container{
 float: left;
 width: 980px;
 height: 100%;
}
#linkespalte{
 float: left;
 width: 180px;
 margin: 0px;
 padding: 0px;
 background-color: #FFFFFF;
}
#mitte{
 float: left;
 width:650px;
 height: 100%;
 border-top: 1px solid #FFFFFF;
 vertical-align: top;
}
#rechtespalte{
 float: right;
 width: 150px;
 padding: 1px 0px 0px 0px;
 font-size: 0.8em;
 height: 100%;
}
so sieht die screen stylesheet aus!
Setze ich nun die 'linkespalte' u. 'rechtespalte' auf display: none;
und gebe der 'mitte' width: 100%; oder irgendwas, wird sie nur so angezeigt, als wären die anderen Spalten noch da.
Wenn ich die folgende Angabe einbinde, wird in bei firefox und opera die übrig bleibende Spalte in A4 breite angezeigt. Nur der IE spielt kennt diese Angabe nicht. (Es ist ja eigentl. auch keine korrekte Angabe)
<style type="text/css">
@page { size:40.0cm 28.0cm; margin:1cm 1cm 1.4cm 1cm; }
</style>

Gruß
Maggie

[Ingo Turski]

Hi,

und gebe der 'mitte' width: 100%; oder irgendwas, wird sie nur so angezeigt, als wären die anderen Spalten noch da.

gebe ihr: width:auto; height:auto; float:none;
vertical-align wirkt sich ja ohnehin nicht aus.

freundliche Grüße
Ingo

[maggie]

Hi,

und gebe der 'mitte' width: 100%; oder irgendwas, wird sie nur so angezeigt, als wären die anderen Spalten noch da.
gebe ihr: width:auto; height:auto; float:none;
vertical-align wirkt sich ja ohnehin nicht aus.

freundliche Grüße
Ingo

Hi Ingo, könntest Du bitte die Druckvorschau anschauen. Wäre sehr nett von Dir. http://www.suchthilfe.de/verband/aufgaben.php

[Ingo Turski]

Hi,

http://www.suchthilfe.de/verband/aufgaben.php
Du hast da einen Haufen redundanter CSS-Regeln drin. Über die Hälfte ist völlig überflüssig.
In der Druckansicht sehe ich noch die Linkbox oben rechts, allerdings nur bei Verkleinerung der Anzeige auf Seitengröße.
Dieses merkwürdige Verhalten meines Firefox lässt auf einen Fehler in der Seite schließen und ... bingo ... Du bindest das erste Stylesheet im body erneut ein. Dank der Fehlertoleranz der Browser überschreibt es das Druck-CSS wieder.

freundliche Grüße
Ingo

[Maggie]

Du hast da einen Haufen redundanter CSS-Regeln drin. Über die Hälfte ist völlig überflüssig.
In der Druckansicht sehe ich noch die Linkbox oben rechts, allerdings nur bei Verkleinerung der Anzeige auf Seitengröße.
Dieses merkwürdige Verhalten meines Firefox lässt auf einen Fehler in der Seite schließen und ... bingo ... Du bindest das erste Stylesheet im body erneut ein. Dank der Fehlertoleranz der Browser überschreibt es das Druck-CSS wieder.

freundliche Grüße
Ingo

Wau!
Hi Ingo,
erstmal herzlichen Dank für Deine Mühe.
Diesen Fehler hätte ich nie entdeckt.
Mit den redundanten Stylesheets, ja da muss ich echt nochmal ran - gibt es ein gutes css-Regelwerk?
;-) Am liebsten würde ich Dich noch mal um Korrekturlesen fragen wollen, wenn ich die Styles überarbeitet habe. Das wird dann aber ein Bezahlauftrag werden.

Gruß
Maggie

[trunx]

hmm, ich sehe nicht, dass eine druck.css eingebunden wäre... und natürlich muss der der zweite link-tag aus dem body-container raus.

bye trunx

[Ingo Turski]

Hi,

Diesen Fehler hätte ich nie entdeckt.

nunja, wenn ich nicht selbst auf die Idee gekommen wäre, hätte ch als nächstes einfach den Validator bemüht - der hätte den Fehler sofort moniert.

Mit den redundanten Stylesheets, ja da muss ich echt nochmal ran - gibt es ein gutes css-Regelwerk?

Kommt drauf an, was Du darunter verstehst. Zum Nachschlagen ist das SELFHTML-Kapitel über die CSS-Eigenschaften sehr gut geeignet.

Aber nur mal Deine ersten Formatierung für html,body und *:

Die font- und Farb-Angaben solltest Du nur für body machen, wobei
  font: lighter 100,1% Verdana, Arial, Helvetica, sans-serif;
ausreicht; allerdings passen die Alternativschriften nicht zu Verdana.
Von Deinen späteren Angaben z.B. zu h1 ist dann lediglich color noch erforderlich - alles übrig ist redundant.

Und bitte gebe auch eine zur Schriftfarbe passende Hintergrundfarbe an - Du kannst nicht davon ausgehen, dass jeder hier weiss in seinem Browser voreingestellt hat. Wer schlecht sehen kann, stellt vielleicht zur Kontrasterhöhung weiße Schrift auf schwarzem Grund ein und sieht ... nix mehr.

white-space:normal ist überflüssig und margin und padding für html,body ebenfalls, da Du dis ja bereits für alle Elemente angibst.

line-height: 1.5em für alle Elemente ist übel und sollte besser für die jeweiligen Schriftgrößen separat passend angegeben werden.

Die invaliden Scrollbar-Formatierungen sind zwar Geschmacksache, aber im Druck-CSS zumindest reichlich überflüssig. ;-)

;-) Am liebsten würde ich Dich noch mal um Korrekturlesen fragen wollen, wenn ich die Styles überarbeitet habe. Das wird dann aber ein Bezahlauftrag werden.

nur zu, mach' ich gerne.

freundliche Grüße
Ingo

[MudGuard]

Hi,

bei einem dreispaltigen Layout habe ich die beiden äußeren Spalten ausgeblendet {display:none;},
die mittlere Spalte sollte nun die ganze Druckbreite (A4) ausfüllen.
Weder mit width: 100%; noch mit irgendwelchen Pixelangaben verändert sich die Druckausgabe.
Was muss noch beachtet werden?

Ggf. die Specifity?

cu,
Andreas