Drucklayout für eine lange html Seite klappt nicht

[Susanne07]

Hi,

habe für die Seite

http://www.dorettehugo.de/dsb/entwuerfe/02_daemmung.html   ein Drucklayout erstellt, das in allen von mit getesteten Browsern (Opera, IE und Firefox) Probleme macht, allerdings unterschiedliche.

Keiner floatet die Elemente wie er sollte, auch wenn genügend Platz da ist, Opera und Firefox drucken Bilder, die am Seitenumbruch liegen (der ja je nach zoom verschieden ist) gar nicht bzw. teilweise.

Ich verstehe es einfach nicht. CSS und Seite sind validiert.

Vielleicht weiß jemand von euch einen Rat?

Gruß, Susanne

[tomgk]

Hallo,

Bei "Warum dämmen" ist der 3. und 4. Punkt gleich.

MfG
tomgk

[Susanne07]

Hi  Tom,

vielen Dank für deinen Hinweis. Habe ich gleich verbessert.

Gruß, Susanne

[Auge]

Hallo

http://www.dorettehugo.de/dsb/entwuerfe/02_daemmung.html   ein Drucklayout erstellt, das in allen von mit getesteten Browsern (Opera, IE und Firefox) Probleme macht, allerdings unterschiedliche.

Vielleicht weiß jemand von euch einen Rat?

Kontrolliere deine CSS-Angaben bezüglich der Unterstützung durch die verschiedenen Browser.

Lesestoff:
<http://de.selfhtml.org/css/eigenschaften/printlayouts.htm@title=SELFHTML: Layouts für Printmedien>
SELFHTML-Artikel: Stylesheet für ein Drucklayout

Tschö, Auge

[Malcolm Beck´s]

hi,

habe für die Seite
http://www.dorettehugo.de/dsb/entwuerfe/02_daemmung.html   ein Drucklayout erstellt

Welches Druckerpapier? Was ich sagen will ; ich kann die Links deiner Seiten nicht klicken, wenn ich diese ausgedruckt habe, an sich verschwendest du damit nur meine Druckertinte, auch leidet die lesbarkeit der ausgedruckten Seite unter überflüssigen Inhalten, die ausgedruckt, völlig Sinnlos sind.

Keiner floatet die Elemente wie er sollte, auch wenn genügend Platz da ist,

Ich mache es mir leicht, ich hab ein screen-CSS und ein Print-CSS.
Das Print-CSS enthält keine Farben, so ist zumindest sichergestellt, dass auch schwarz-weiss Drucker kein Problem mit der Seite haben.

Vielleicht weiß jemand von euch einen Rat?

Ich würde für das Drucklayout ein Brief oder ein Buch als Vorlage nehmen, statt zu versuchen, die „Seite“ auszudrucken.

mfg

[Susanne07]

Hi

Welches Druckerpapier? Was ich sagen will ; ich kann die Links deiner Seiten nicht klicken, wenn ich diese ausgedruckt habe, an sich verschwendest du damit nur meine Druckertinte, auch leidet die lesbarkeit der ausgedruckten Seite unter überflüssigen Inhalten, die ausgedruckt, völlig Sinnlos sind.

Danke für den Hinweis, habe ich geändert.

Das Print-CSS enthält keine Farben, so ist zumindest sichergestellt, dass auch schwarz-weiss Drucker kein Problem mit der Seite haben.

Meines auch nicht, ich verstehe nur nicht, warum eine Definitionsliste mit Inhalt Text gefloatet wird und eine mit Bildern eben nicht, trotz gleicher Auszeichnung. Warum die Bilder manchmal mittendrin abgeschnitten bzw. gar nicht angezeigt werden, ist mir auch ein Rätsel.

mfg

Gruß, Susanne

[Malcolm Beck´s]

hi,

Meines auch nicht, ich verstehe nur nicht, warum eine Definitionsliste mit Inhalt Text gefloatet wird und eine mit Bildern eben nicht, trotz gleicher Auszeichnung. Warum die Bilder manchmal mittendrin abgeschnitten bzw. gar nicht angezeigt werden, ist mir auch ein Rätsel.

Vielleicht liegt das eben an dem floaten, mMn brauchst du in deinem Print-CSS  auch keine floatenden Elemente ; da aber Bilder mehr als 1000 Worte sagen, hier ein Screenshot:
http://start-navi.de/images/drucklayout-Susanne07.gif - eigentlich wird ja nichts wirklich gefloatet

Das einzige, was man vom float sieht, ist die Überschrift, die völlig falsch dargestellt wird.
Setz doch einfach mal einen border um die Definitionslisten.

Ich habe für mein Print-CSS sage und schreibe 13 min. gebraucht, einfach alle klassen und IDs, die nicht gedruckt gehören auf display: none;, die restlichen formatierungen darf sich der Browser aus den defaulteinstellungen beziehen.

mfg

[Susanne07]

Hi  Malcolm,

es lag tatsächlich am float, ich habe gestern noch lange gesucht und schließlich einen Artikel von Eric Meyer gefunden, der einen Bug beschreibt, der durch das float im Drucklayout hervorgerufen wird http://www.alistapart.com/articles/goingtoprint/.

• eigentlich wird ja nichts wirklich gefloatet

Doch, ich habe meine Bilder in Definitionslisten gepackt, was ja auch semantisch Sinn macht und wollte sie eben auch nebeneinader ausgedruckt haben, das sich der optische Eindruck einer Tabelle ergibt. Das geht anscheinend erst ab CSS 3.

Ich habe für mein Print-CSS sage und schreibe 13 min. gebraucht, einfach alle klassen und IDs, die nicht gedruckt gehören auf display: none;, die restlichen formatierungen darf sich der Browser aus den defaulteinstellungen beziehen.

Normalerweise dauert mein Drucklayout auch nicht länger, aber dieser Float-Bug hat mich in den Wahnsinn getrieben :).

Vielen Dank, das du nachgeschaut hast.

Gruß, Susanne

[suit]

Doch, ich habe meine Bilder in Definitionslisten gepackt, was ja auch semantisch Sinn macht

eigentlich nicht - es ist lediglich das geringste übel, da es keine ordentliche elemente gibt, die defintiv einem bild eine beschreibung zuordnen

ich persönlich bevorzuge diese variante:

<div>  
  <img src="foo.png" alt="foo" />  
  <p>foo bar baz</p>  
</div>

[Kai345]

[latex]Mae  govannen![/latex]

Doch, ich habe meine Bilder in Definitionslisten gepackt, was ja auch semantisch Sinn macht
eigentlich nicht - es ist lediglich das geringste übel, da es keine ordentliche elemente gibt, die defintiv einem bild eine beschreibung zuordnen

ich persönlich bevorzuge diese variante:

<div>

<img src="foo.png" alt="foo" />
  <p>foo bar baz</p>
</div>

  
Bei dieser Variante ist die Zusammengehörigkeit img <-> p semantisch überhaupt nicht gegeben (zwei beliebige Elemente, die durch ein div gruppiert werden) . Da halte ich die Liste doch für die bessere Wahl. Aber ein "richtiges" Element wäre natürlich besser, ähnlich wie label.  
  
  
Cü,  
  
[Kai](http://www.kaichen.in/selfhtml/)

-- 
Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul  
  
selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?  
[Mein Selfhtml-Kram](http://www.kaichen.in/selfhtml/)

[suit]

Bei dieser Variante ist die Zusammengehörigkeit img <-> p semantisch überhaupt nicht gegeben (zwei beliebige Elemente, die durch ein div gruppiert werden).

wieso? das darumliegende elternelement gruppiert die darinliegenden elemente im baum

was ist der unterschied zwischen folgenden dingen, logisch gesehen?

<artikelliste>  
  <artikel>  
    <bild>foo.jpg</bild>  
    <beschreibung>foo foo foo</beschreibung>  
  </artikel>  
  <artikel>  
    <bild>bar.jpg</bild>  
    <beschreibung>bar bar bar</beschreibung>  
  </artikel>  
</artikelliste>

<bildergalerie>  
  <bild>  
    <pfad src="foo.jpg" />  
    <beschreibung>foo foo foo</beschreibung>  
  </bild>  
  <bild>  
    <pfad src="bar.jpg" />  
    <beschreibung>bar bar bar</beschreibung>  
  </bild>  
</bildergalerie>

<body>  
  <div>  
    <img src="foo.jpg" />  
    <p>foo foo foo</p>  
  </div>  
  <div>  
    <img src="bar.jpg" />  
    <p>bar bar bar</p>  
  </div>  
</body>

in jedem fall ist es eine mehrdimensionale datenstruktur - die maschinenlesbarkeit wurd durch benannte elemente verbessert, da ihnen auch noch bedeutungen zugeordent werden können - bei "aussagelosen" elementen ist das nicht der fall - in jedem falle haben sie aber die aussage "mein inhalt (kindelemente) gehört logisch zusammen"

[Kai345]

[latex]Mae  govannen![/latex]

in jedem fall ist es eine mehrdimensionale datenstruktur - die maschinenlesbarkeit wurd durch benannte elemente verbessert, da ihnen auch noch bedeutungen zugeordent werden können - bei "aussagelosen" elementen ist das nicht der fall - in jedem falle haben sie aber die aussage "mein inhalt (kindelemente) gehört logisch zusammen"

<div> bedeutet eine Gruppierung beliebiger Elemente, deren einzige Gemeinsamkeit eben diese Gruppierung an sich ist, wie die Elemente untereinander verbunden sind, ist nicht ersichtlich.

Die ursprünglich erwähnte Definitionsliste (um die es ging) hingegen gruppiert ebenfalls, aber hier ist zusätzlich eine direkte Beziehung der Elemente untereinander vorgegeben. Das eine (Liste) ist ein Schrank mit Schubfächern, die z.B. mit Hemden, Socken .. beschriftet sind, das Andere (div) ist eine Wäschetruhe, in die man einfach alles hineinwirft.

Cü,

Kai

[Malcolm Beck´s]

hi Susanne,

• eigentlich wird ja nichts wirklich gefloatet

Doch, ich habe meine Bilder in Definitionslisten gepackt, was ja auch semantisch Sinn macht und wollte sie eben auch nebeneinader ausgedruckt haben, das sich der optische Eindruck einer Tabelle ergibt.

Daher das Screenshot, die Bilder standen ja nicht nebeneinander, sondern wurden einfach wie eine Liste untereinander dargestellt, das meinte ich mit

eigentlich wird ja nichts wirklich gefloatet

Zugegeben, diese Aussage ließ viel Luft für freie Interpretationen ;)

mfg

[Susanne07]

Hi,

eigentlich wird ja nichts wirklich gefloatet

Zugegeben, diese Aussage ließ viel Luft für freie Interpretationen ;)

Tja, was der Mensch will und was der Computer daraus macht, ist nicht immer das Gleiche. Immerhin hast du mich inspiriert Hintergrundinfos zu suchen und ich habe wieder etwas gelernt. Jetzt ist es so gut wie es eben geht, ohne den Grundaufbau der Seite zu ändern.

Danke, daß du dich des Problems angenommen hast.
Gruß, Susanne