Hallo Miteinander,
ich möchte über einen Button initiiert aus dem Browser heraus den Inhalt der Anreißer-Text-Widgets "PDF-fertig" für den Leser ausdrucken lassen. Dafür benutze ich etwas CSS:
CSS
@media print {
/* 1. Alles komplett ausblenden */
body * {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}
/* 2. Nur den Artikel-Container und seine Kinder wieder einblenden */
.print-container,
.print-container * {
visibility: visible;
height: auto;
}
/* 3. Den Artikel ganz oben auf der Seite fixieren */
.print-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
/* Bonus: Keine hässlichen URLs neben den Links */
a:after {
content: none !important;
}
}
Alles anzeigen
Damit nun nicht der gesamte Inhalt dieser Web-Unterseite gedruckt wird, umschließe ich den Text mit:
Code
<article class="print-container">
<div class="content">
. . . MEIN Ausreißer-Text TEXT ...
</div></article>
Da das Widget "Anreißer-Text" zwei Textfenster hat (Eye-Catcher-Text und Artikel-Text) möchte ich natürlich beides ausgedruckt haben. Ausgedruckt wird aber nur der Inhalt des ersten Text-Fensters. Es lassen sich beide Fensterinhalte mit <article></article> nicht umschließen, das </article> wird von ZP automatisch ans Ende des oberen Textfeldes verschoben und somit nur dieses ausgedruckt.
Gibt es hier einen Fix oder mache ich einen Denkfehler?