Mozilla Druckansicht - div Formatierung margin-top

D

djnelly

Erfahrenes Mitglied
Hallo Tutorials-Gemeinde,

ich habe ein Etikett A5, was zweimal auf eine A4 Seite gesetzt ist. Innerhalb einer Tabelle mit einer Spalte und einer Zeile ist per CSS Div Tags die genaue Position der einzelnen Felder geregelt.

Beim Aufrufen der Seiten werden alle Tabellen sauber untereinander dargestellt. Beim der Druckvorschau wird die erste Seite dargestellt, ab Seite 2 ist alles leer, trotzdem werden die Seiten angezeigt. Die Tabellen sind dort vorhanden, allerdings richten Sie die Div Container nicht nach der Tabelle aus (margin-top) sondern nach der ersten Seite. Somit legen sich alle Etiketten übereinander.

Vom Prinzip bräuchte ich zwei mal die Tabelle pro Seite, dann page-break und wieder zwei Etiketten...

Das ganze wird dann mal in einer Schleife produziert.

Vereinfachter Code als Beispiel:

HTML: 
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>


<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" height="200px;">
  <tr>
    <td>
    <div id="Bereich1" style="position:absolute; margin-top:10px; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="position:absolute; margin-top:10px; width:200px; margin-left:250px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="position:absolute; margin-top:40px; width:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>

Wenn man sich hier die Druckvorschau in Mozilla anschaut, wird nach Seite 1 alles abgeschnitten!

Bitte um Hilfe...
 
Unabhängig vom genannten Browser, findet sich der Grund hierfür in deiner jeweils deklarierten CSS-Regel position:absolute, die in einem Druckstylesheet nicht anzuwenden ist, insbesondere dann, wenn das Dokument später im Druck mehrere Seiten umfasst.

Ebenso kann hier die feste Höhenangabe der einzelnen Elemente zu Druck-Fehlinterpretationen führen.

Es empfiehlt sich zudem, anstelle der offensichtlich verwendeten Inline-Styles (style-Attribute in HTML-Tags) separate CSS-Dateien im Dokumentheader einzubinden, und für den Druck ein gesondertes Stylesheet anzulegen, um darin die beiden angesprochenen Unterscheidungen zwischen der Bildschirm- und Druckansicht vornehmen zu können.

Siehe hierzu Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien.
 
Zuletzt bearbeitet:
Hallo,

danke für die Antwort! Nur wie bekomme ich einen zweiten Div-Tag neben den ersten, wie im Beispiel ohne die position:absolute zu verwenden?

Mein Beispiel ist nur symbolisch. die CSS sind ausgelagert...
 
Warum nutzt du nicht der Einfachheit halber anstelle der <div>-Elemente mehrere <td>-Elemente pro Tabellenzeile?

Ansonsten versuch es mal mit der float-Eigenschaft, mit der sich die Blöcke nebeneinander ausrichten lassen.
 
Zuletzt bearbeitet:
also das mit dem float anstatt position:absolute funktioniert ganz gut. Auf jeden fall wenn ich zwei div`s nebeneinander habe... aber wenn ich drei nebeneinander habe, geht es nicht mehr so schön...

HTML: 
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <div id="Bereich1" style="float: left; width:200px; background-color:#F00">Text für Bereich 1</div>
    <div id="Bereich2" style="float: left; width:200px; margin-left:200px; background-color:#00F">Text für Bereich 2</div>
    <div id="Bereich3" style="width:200px; margin-left:400px; background-color:#FF0">Text für Bereich 3</div>
    </td>
  </tr>
</table>

ich bekomm das dritte Element nicht neben das zweite gesetzt!
 
HTML: 
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <div id="Bereich1" style="float:left;width:200px;background:#f00;">Text für Bereich 1</div>
    <div id="Bereich2" style="float:left;width:200px;background:#00f;">Text für Bereich 2</div>
    <div id="Bereich3" style="float:right;width:200px;background:#ff0;">Text für Bereich 3</div>
    </td>
  </tr>
</table>
Deine immerwiederkehrenden ID-Bezeichner (#Bereich1, #Bereich2, #Bereich3) dürfen übrigens im HTML-Dokumentbaum jeweils nur einmal vergeben werden / enthalten sein.

Wenn sie im zentralen CSS der Elementformatierung dienen, und auf mehrere Elemente im HTML-Code angewendet werden, stehen Klassen (.className {} = mit Punkt vor Name im CSS-Selektor, Aufruf ohne Punkt vor Namen mit dem Attribut class="className" im HTML-Tag) zur Verfügung, die beliebig oft darin vorkommen können.

Wärst du mir noch die Antwort auf meine zuletzt gestellte Frage schuldig, warum du nicht einfach die Tabellenzeile <tr> mit zwei weiteren <td>-Elementen bestückst, um eine dreispaltige Tabelle zu bilden, anstatt diese Prozession zu fahren?

Frei nach dem Motto: "Warum einfach, wenns auch kompliziert umständlich geht?" :suspekt:

HTML: 
<body>
  <table border="1" cellpadding="0" cellspacing="0">
    <colgroup>
      <col id="Bereich1">
      <col id="Bereich2">
      <col id="Bereich3">
    </colgroup>
    <tr>
      <td>1. Zeile, 1. Spalte</td>
      <td>1. Zeile, 2. Spalte</td>
      <td>1. Zeile, 3. Spalte</td>
    </tr>
    <tr>
      <td>2. Zeile, 1. Spalte</td>
      <td>2. Zeile, 2. Spalte</td>
      <td>2. Zeile, 3. Spalte</td>
    </tr>
    <tr>
      <td>3. Zeile, 1. Spalte</td>
      <td>3. Zeile, 2. Spalte</td>
      <td>3. Zeile, 3. Spalte</td>
    </tr>
  </table>
</body>
CSS: 
col { width:200px; }
#Bereich1 { background:#f00; }
#Bereich2 { background:#00f; }
#Bereich3 {background:#ff0; }
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück