nicht angemeldet
Spezielles Seitenlayout
Hallo,
ich hätte eine Frage zu CSS-Style-Sheets. Ich soll für eine HTML-Seite ein spezielles Drucklayout erschaffen. Die Inhalte dieser Seite bestehen aus einem Grundgerüst (Kopfzeile) und verschiedenen Inhalten. Die Inhalte werden aus einer Datenbank geholt(Mittels von PHP-Skripten) und werden unterschiedliche Längenformate haben.
Das Drucklayout soll folgendermaßen aussehen, das der Kopf auf jeder auf jeden Seite(DINA4) erscheinen soll (sofern eine zweite Seite überhaupt gebraucht wird), dann sollen die Inhalte kommen. Wenn der Inhalt ein Text ist, soll dieser durch eine weitere Kopfzeile unterbrochen werden, sofern die komplette HTML-Seite länger ist als 1 Seite(DINA4). Grafiken sollen erst auf der nächsten Seite erscheinen.
Ich habe mich ja schon ein bischen in CSS eingelesen und weiß, das man unterschiedliche Format-Definitionen für unterschiedliche Ausgabe-Medien definieren kann. Und auch, das für man einfach über "size" die Seitengröße definieren kann.
Aber wie kann ich die Darstellung der einzelnen Inhalte beeinflussen? Über "Position" kann ich ja einstellen, das die Kopfzeile nur am Anfang steht. Aber wie ist der Rest zu schaffen?
Über Positionierung und Anzeige von Elementen?
-
Hi Alexander,
Das Drucklayout soll folgendermaßen aussehen, das der Kopf auf jeder auf jeden Seite(DINA4) erscheinen soll (sofern eine zweite Seite überhaupt gebraucht wird),
was verstehst du unter "Kopf"? Einen speziellen Bereich, der in HTML einmal definiert wird, aber auf jedem Ausdruck erscheinen soll? Das ist ohne Umwege leider nicht möglich. Eine _theoretische_ Möglichkeit wäre, ein Element zu definieren, vor dem mittels page-break-before:always immer ein Seitenumbruch zu erfolgen hat
http://de.selfhtml.org/css/eigenschaften/printlayouts.htm#page_break_before
http://www.w3.org/TR/CSS21/page.html#propdef-page-break-beforeund der mittels generiertem Inhalt (before: oder after:)
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after
http://www.w3.org/TR/CSS21/generate.html#x5den gewünschten Inhalt einfügt. Am Beispiel eines sonst unsichtbaren <hr> sähe das wie folgt aus:
@media screen {
hr { display:none; }
}@media print {
hr { page-break-before:always; color:#fff; margin-bottom:3em; text-align:left; }
hr:after { content:"Dieser Text wird auf\Ajeder Seite dargestellt."; }
body:before { content:"Dieser Text wird auf\Ajeder Seite dargestellt."; }
}Dieses Beispiel online mit Kommentar: http://skop.net/self/drucklayout_kopfbereich_wiederholen.html
dann sollen die Inhalte kommen. Wenn der Inhalt ein Text ist,
Wie sieht die Alternative aus? Handelt es sich um ein Bild? Du könntest einen Selektor verwenden, der nur für <p> gilt, wenn es nach Element <xyz> steht:
xyz+p { ... }
http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectorssoll dieser durch eine weitere Kopfzeile unterbrochen werden, sofern die komplette HTML-Seite länger ist als 1 Seite(DINA4).
_Das_ lässt sich mit CSS allerdings nicht mehr "abfragen". Auch serverseitig lässt sich das nur grob schätzen.
Grafiken sollen erst auf der nächsten Seite erscheinen.
<div id="grafiken">
<img ... />
</div>#grafiken { page-break-before:always; }
Ich habe mich ja schon ein bischen in CSS eingelesen und weiß, das man unterschiedliche Format-Definitionen für unterschiedliche Ausgabe-Medien definieren kann. Und auch, das für man einfach über "size" die Seitengröße definieren kann.
Wobei size: wiederum nur von Opera halbwegs unterstützt wird, siehe auch
http://corecss.com/properties/property.php?Name=size
Aber wie kann ich die Darstellung der einzelnen Inhalte beeinflussen? Über "Position" kann ich ja einstellen, das die Kopfzeile nur am Anfang steht.
Ich würde bei einem Drucklayout auf position: verzichten und eher mit display: arbeiten. Auch mit generiertem Inhalt kannst du dich austoben ;-) Einige Beispiele findest du hier:
http://aktuell.de.selfhtml.org/tippstricks/css/drucklayout/
Bei aller Kreativität, die man hier ausleben darf sollte man nicht vergessen, dass der M$IE keine der genannten Methoden versteht. Wenn du ein einheitliches Drucklayout in allen Browser erreichen willst, kommst du um serverseitige Progammierung nicht herum. Eine Alternative für komplexe Layouts wäre PDF.
Grüße,
Roland