print.css: Druckausgabe Layout | Seitenumbruch vor nach einem bestimmten Element erzwingen verhindern   


Freitag, 24. März 2023

05:11

Homepage-Tipps & -tricks für Webmaster mit CSS

Seitenumbruch vor oder nach einem bestimmten Element erzwingen oder verhindern

Anweisungen in der print.css: (Klassenselektoren)

.umbruch_vor
{
page-break-before: always;
}
.umbruch_nach
{
page-break-after: always;
}
.kein_umbruch_vor
{
page-break-before: avoid;
}
.kein_umbruch_nach
{
page-break-after: avoid;
}

Anweisung in der print.css, wenn vor jeder höchsten Überschriftenebene, wie z. B. vor einem h1-Tag ein Umbruch erfolgen soll: (Typselektor)

h1
{
page-break-before: always;
}

Anweisungen im Html-Dokument:

<html>
<head>
<title>Druckausgabe | Seitenumbruch</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

<body>
<p class="umbruch_vor">Vor diesem Absatz erfolgt ein Umbruch!</p>
<p class="umbruch_nach">Nach diesem Absatz erfolgt ein Umbruch!</p>
<p class="kein_umbruch_vor">Vor diesem Absatz erfolgt kein Umbruch!</p>
<p class="kein_umbruch_nach">Nach diesem Absatz erfolgt kein Umbruch!</p>
<h1>Vor dieser Ãœberschrift erfolgt ein Umbruch!</h1>
</body>
</html>

Das könnte Sie vielleicht auch interessieren:
[ Drucklayout mit media='print' und print.css festlegen ]
[ PDFCreator kostenlos downloaden ]

[ veröffentlicht am 27.07.2010 ] __________________________

zurück
 weiter



© 2007 - 2023 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:27 aktualisiert.