tag:forum.selfhtml.org,2005:/self@media print - Probleme mit leeren Flächen – SELFHTML-Forum2018-08-11T17:50:31Zhttps://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728673#m1728673Ingrid2018-08-09T15:49:43Z2018-08-09T15:49:43Z@media print - Probleme mit leeren Flächen<p>Hallo,</p>
<p>ich bin neu auf dem Forum und möchte Euch erst einmal begrüssen und sagen, dass ich Selfhtml wirklich toll finde.</p>
<p>Allerdings habe ich ein Problem. Der Hintergrund ist, dass ich derzeit HTML nicht für das Internet benutzen möchte, sondern um schöne Dias — als Alternative zu Powerpoint — zu erstellen. Das klappt auch ausgezeichnet, ... dank Grid-System.</p>
<p>Das Problem ist, dass sich die Dias nicht in der gewünschten Weise ausdrucken lassen; die Platzanordnung funktioniert nicht: Riesige weisse Flächen tun sich auf.</p>
<p>Kurzbeschreibung der Dias:
Oben eine Art Header mit Überschrift usw.,
darunter 2 Reihen mit jeweils 3 Spalten mit verschiedenfarbigem Hintergrund:
<em>grid-template: "oben oben oben"
"eins zwei drei"
"vier fünf sechs";</em>
innerhalb der 6 Felder jeweils eine kleine Tabelle mittels:
<em><table><tr><td> usw</em> .</p>
<p>Ich habe es geschafft, in der Druckversion mittels <em>@media print</em> die Schriftgrösse nach Wunsch zu dimensionieren und die Schriftart zu verändern usw.; aber der Text lässt sich auf dem Papier nicht so anordnen, wie ich es möchte:
Nach der Überschrift ist nach unten hin erst einmal ein paar Zentimeter weisse Fläche, bevor die ersten 3 Tabellen erscheinen (diese, wie gewünscht, in einer Reihe). Danach ist nach unten hin mehr als die halbe Seite frei; die zweite Reihe Tabellen befindet sich dann erst oben auf Seite 2. Dabei würden die 6 Tabellen mit Leichtigkeit auf eine Seite passen.</p>
<p>Daraufhin habe ich mit <em>margin</em> und <em>padding</em> herumversucht, die Abstände zu verkleinern, aber es hilft nichts.</p>
<p>Anschliessend habe ich versucht, in der Druckversion das Grid-System abzuschaffen - Ergebnis: Sämtliche Tabellen ordnen sich untereinander an.</p>
<p>Es hat auch nichts geholfen, den Tabellen den Stil <em>display: inline–block</em> zuzuweisen.</p>
<p>Wer kann mir eine Lösung vorschlagen, wie sich die riesigen Abstände verkleinern lassen, so dass die 6 Tabellen alle auf eine Seite passen (jeweils 3 in eine Reihe)?</p>
<p>Danke im voraus.</p>
<p>Ingrid</p>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728674#m1728674Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2018-08-09T16:01:44Z2018-08-09T16:01:44Z@media print - Probleme mit leeren Flächen<p>Hallo Ingrid,</p>
<blockquote>
<p>innerhalb der 6 Felder jeweils eine kleine Tabelle mittels:
<em><table><tr><td> usw</em> .</p>
</blockquote>
<p>Das müffelt nach Layouttabelle.</p>
<blockquote>
<p>Wer kann mir eine Lösung vorschlagen, wie sich die riesigen Abstände verkleinern lassen, so dass die 6 Tabellen alle auf eine Seite passen (jeweils 3 in eine Reihe)?</p>
</blockquote>
<p>Stell bitte ein online-Beispiel zur Verfügung. Zum Beispiel auf bplaced.net mit Bildern von lorempixel.com.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728675#m1728675beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-08-09T16:05:06Z2018-08-09T16:05:06Z@media print - Probleme mit leeren Flächen<p>hallo</p>
<blockquote>
<p>Wer kann mir eine Lösung vorschlagen, wie sich die riesigen Abstände verkleinern lassen, so dass die 6 Tabellen alle auf eine Seite passen (jeweils 3 in eine Reihe)?</p>
</blockquote>
<p>Als Abhilfe kann ich dir nur raten, die Tabellen mit width:33% zu floaten. (spart zusätzliches Markup)</p>
<div class="signature">-- <br>
<a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a>
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728679#m1728679Henry2018-08-09T16:46:19Z2018-08-09T16:46:19Z@media print - Probleme mit leeren Flächen<p>Hallo Matthias,</p>
<blockquote>
<p>lorempixel.com.</p>
</blockquote>
<p>ist offline.</p>
<p>Gruss<br>
Henry</p>
<div class="signature">-- <br>
Meine Meinung zu DSGVO & Co:<br>
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728682#m1728682Rolf B2018-08-09T17:25:44Z2018-08-09T17:25:44Z@media print - Probleme mit leeren Flächen<p>Hallo beatovich,</p>
<p>du meinst: wenn schon Kuddelmuddel, dann auch richtig wirr?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728683#m1728683Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2018-08-09T17:34:16Z2018-08-09T17:34:16Z@media print - Probleme mit leeren Flächen<p>Hallo Henry,</p>
<blockquote>
<blockquote>
<p>lorempixel.com.</p>
</blockquote>
<p>ist offline.</p>
</blockquote>
<p>Gut zu wissen, danke. Dann eben placeholder.com.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728686#m1728686beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-08-09T17:40:44Z2018-08-09T17:40:44Z@media print - Probleme mit leeren Flächen<p>hallo</p>
<blockquote>
<p>du meinst: wenn schon Kuddelmuddel, dann auch richtig wirr?</p>
</blockquote>
<p>Hast du einen konkreten Fix?</p>
<div class="signature">-- <br>
<a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a>
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728698#m1728698Rolf B2018-08-10T08:41:56Z2018-08-10T08:41:56Z@media print - Probleme mit leeren Flächen<p>Hallo beatovich,</p>
<p>nein, weil ich das Markup nicht habe und mir dafür im Moment auch die Zeit nicht nehmen kann.</p>
<p>Wirr finde ich jedenfalls den Ansatz, eine Seite mit einer Mischung aus table-Layout und float zu gestalten.</p>
<p>Wenn man schon mit grid anfängt, sollte man es auch damit sauber durchziehen.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728699#m1728699beatovichhttps://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html2018-08-10T08:48:15Z2018-08-10T08:48:15Z@media print - Probleme mit leeren Flächen<p>hallo</p>
<blockquote>
<p>Wirr finde ich jedenfalls den Ansatz, eine Seite mit einer Mischung aus table-Layout und float zu gestalten.</p>
</blockquote>
<p>Es handelt sich nicht um ein table Layout!
Lesen hilft.</p>
<div class="signature">-- <br>
<a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a>
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728700#m1728700Rolf B2018-08-10T09:09:38Z2018-08-10T09:09:38Z@media print - Probleme mit leeren Flächen<p>Hallo beatovich,</p>
<p>gelesen habe ich. Aber möglicherweise falsch verstanden...</p>
<blockquote>
<p>innerhalb der 6 Felder jeweils eine kleine Tabelle mittels: <table><tr><td></p>
</blockquote>
<p>Wenn's eine Dia-Show ist, was hat da eine Table zu suchen?
Ob es ein Mix aus Grid- und Table-Layout ist, oder die Tables semantische Berechtigung haben, kann aber nur ein veröffentlichtes Markup zeigen.</p>
<p>Und man müsste wissen, welcher Browser verwendet wird. Vielleicht ist es ja ein Bug.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728702#m1728702Ingrid2018-08-10T10:43:00Z2018-08-10T10:47:39Z@media print - Probleme mit leeren Flächen<p>Hallo,</p>
<p>danke an Euch alle. Ich habe die Idee von beatovich aufgegriffen, und das Ergebnis hat sich bereits ein Stück weit verbessert. Allerdings beherrsche ich bisher <em>float</em> noch nicht so gut und muss es erst vertiefen.</p>
<p>Inzwischen habe ich auch noch in andere Richtungen hin probiert und irgendwie eine Lösung gefunden, die mich vorläufig halbwegs zufriedenstellt. Aber richtig verstanden habe ich nicht, warum es plötzlich besser klappt.</p>
<p>Danke auch für den Hinweis zu den Seiten, wo man seine Versuche zur Ansicht einstellen kann. Im Augenblick werde ich allerdings erst einmal selbst weiterprobieren, damit ich nicht Eure Hilfe unnötig in Anspruch nehmen muss. Es kann sein, dass ich später noch einmal darauf zurückkomme.</p>
<p>Zu Euren allgemeinen Anmerkungen:
Das Layout für die Bildschirmversion habe ich mittels Grid-System geschaffen; und die Tabellen (<em>table</em>) innerhalb der Grid-Felder sind echte semantische Tabellen (mit einzelnen Wörtern pro Tabellenfeld).</p>
<p>Und wenn sich manch einer wundert, warum ich so etwas bei Dias mache: Ich erstelle keine Produktpräsentationen, sondern bin im Bildungsbereich tätig; und da ist es manchmal sinnvoll, ein paar Tabellen nebeneinander an die Wand zu projizieren.</p>
<p>Im Übrigen bin ein kein Profi in Informatik, sondern versuche, mir einiges autodidaktisch beizubringen. Und übers Thema <em>@media print</em> habe ich bisher nicht die passende Literatur gefunden (ich meine, solche, die das Layout gut erklärt). Wahrscheinlich sind mir viele von Euch im Forum um Welten voraus.</p>
<p>Bis irgenwann<br>
Ingrid</p>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728713#m1728713Rolf B2018-08-10T13:57:56Z2018-08-10T13:57:56Z@media print - Probleme mit leeren Flächen<p>Hallo Ingrid,</p>
<p>ich habe mal ein bisschen gefummelt. Bei mir gibt's keine Probleme. D.h. ich habe dein Problem vermutlich nicht vollständig erfasst...</p>
<p>Ich habe ein Page-Layout mit Grid. Es gibt Header, Footer und 6 figures, in denen die Dias stehen. Die Zahl 6 ist das Maximum pro Seite.</p>
<p>Als Print-Sonderlocke habe ich den Font des Header geändert.</p>
<p>Header und Footer sind im Grid fest platziert (Zeile 1 und 4, jeweils über alle Spalten), die figures ordnen sich dann automagisch in den restlichen Zellen an.</p>
<p>Statt img habe ich Divs als Platzhalter gesetzt. Im Bild 2 habe ich eine Table eingebaut. Damit die figcaptions immer schön unten stehen, habe ich etwas Höhenarithmetik hinzugefügt. Könnte man sicher auch anders machen.</p>
<p>Was fehlt in meinem Beispiel, um deine Probleme zu reproduzieren?</p>
<pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Dia-Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span>
<span class="token selector">body header</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> Courier<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector">body, figure</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto <span class="token function">repeat</span><span class="token punctuation">(</span>2<span class="token punctuation">,</span> 1fr<span class="token punctuation">)</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">header</span> <span class="token punctuation">{</span>
<span class="token property">font</span><span class="token punctuation">:</span> 200%/2em Verdana<span class="token punctuation">,</span>sans-serif<span class="token punctuation">;</span>
<span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 4<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #f90<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">footer</span> <span class="token punctuation">{</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
<span class="token property">grid-row</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 4<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">figure</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">figcaption</span> <span class="token punctuation">{</span>
<span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">figure .content</span> <span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 2em<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">figure table</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 3px solid green<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.fakeimg</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
Meine Welt in Bildern
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content fakeimg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>:)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>Yet Another Nice Pic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Funktion<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Müller<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Obermahler<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Meyer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Flugzeug-Wartung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Schmitz<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Colonia-Beauftragter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>Your Data<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content fakeimg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>:)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>Yet Another Nice Pic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content fakeimg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>:)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>Yet Another Nice Pic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content fakeimg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>:)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>Yet Another Nice Pic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content fakeimg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>:)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>Yet Another Nice Pic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>
Ein Beispiel von Rolf B
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728726#m1728726Ingrid2018-08-10T21:04:10Z2018-08-10T21:04:10Z@media print - Probleme mit leeren Flächen<p>Hallo Rolf,</p>
<p>vielen Dank für die Arbeit, die Du Dir extra für mich gemacht hast! Mittlerweile habe ich einen Teil der Lösung gefunden … Aber erst einmal der Reihe nach: Ich habe probehalber Deinen Code kopiert und ausprobiert – und bin auf genau das gleiche Problem gestossen, das ich hatte: Der Inhalt erstreckte über 2 Seiten statt einer einzigen. Da ich Dich als grösseren Spezialisten als mich selbst einschätze, habe ich weiterüberlegt und schliesslich daran gedacht, die Seite in einem anderen Browser als vorher auszudrucken, – und siehe da, es hat geklappt: Was in Firefox (neueste Version) sich über 2 Seiten erstreckt, findet in Chrome auf einer Seite Platz.</p>
<p>Auf jeden Fall hast Du dir Dir Deine Mühe nicht umsonst gemacht, denn ich habe nebenbei noch ein paar andere Details gelernt. Also nochmals Danke!</p>
<p>Ingrid</p>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728759#m1728759Rolf B2018-08-11T14:57:33Z2018-08-11T14:57:33Z@media print - Probleme mit leeren Flächen<p>Hallo Ingrid,</p>
<p>ich bin jetzt im Urlaub und habe mich vorsätzlich auf Laptopentzug gesetzt. darum kann ich es nicht mit dem Fuchs testen.</p>
<p>vielleicht kann jemand anderes helfen</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728760#m1728760Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2018-08-11T15:37:57Z2018-08-11T15:38:16Z@media print - Probleme mit leeren Flächen<p>Hallo Ingrid,</p>
<blockquote>
<p>und bin auf genau das gleiche Problem gestossen, das ich hatte: Der Inhalt erstreckte über 2 Seiten statt einer einzigen.</p>
</blockquote>
<p>Der Browser hat Seitenränder definiert. Wenn du die auf Null setzt, passt dein Inhalt auf eine Seite (<code>alt</code> → <code>Datei</code> → <code>Seite einrichten …</code>)</p>
<p><a href="/images/1cf706c8-0e03-4c94-bb09-d037ef174a18.png" rel="noopener noreferrer"><img src="/images/1cf706c8-0e03-4c94-bb09-d037ef174a18.png?size=medium" alt="Screenshot Seite einrichten, Ränder (Firefox)" loading="lazy"></a></p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728767#m1728767Rolf B2018-08-11T17:37:35Z2018-08-11T17:37:35Z@media print - Probleme mit leeren Flächen<p>Hallo Matthias,</p>
<p>ist das ein FF/Chrome Unterschied?</p>
<p>Die Druckränder in Chrome scheinen nicht Teil des Viewport zu sein.</p>
<p>Ich habe meine Seite mit 100vh Höhe definiert und margin+padding vom body entfernt, deswegen füllt sie unter Chrome den bedruckbaren Bereich voll aus.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2018/aug/9/um-media-print-probleme-mit-leeren-flaechen/1728769#m1728769Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2018-08-11T17:50:31Z2018-08-11T17:50:31Z@media print - Probleme mit leeren Flächen<p>Hallo Rolf B,</p>
<blockquote>
<p>ist das ein FF/Chrome Unterschied?</p>
</blockquote>
<p>Ja.</p>
<blockquote>
<p>Die Druckränder in Chrome scheinen nicht Teil des Viewport zu sein.</p>
</blockquote>
<p>im FF schon. Das Verhalten des FF scheint mir nicht korrekt zu sein.</p>
<p>Bis demnächst<br>
Matthias</p>
<div class="signature">-- <br>
Rosen sind rot.
</div>