<hr> background in druckvorschau nicht angezeigt – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes <hr> background in druckvorschau nicht angezeigt Thu, 21 Dec 17 23:40:36 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710563?srt=yes#m1710563 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710563?srt=yes#m1710563 <p>Guten Abend,</p> <p>Ich versuche gerade in CSS eine <hr>-Linie so zu formatieren damit diese einen schwarz ausgemalten Balken darstellt (Trennlinie eines Titels). Dieser Balken möchte ich in der Höhe anpassen können. Er sollte die volle Seitenbreite besitzen.</p> <p>Dies funktioniert auch wunderbar. Doch sobald ich mir das ganze an der Druckvorschau anschaue, habe ich nur noch einen rechteckigen Kasten statt ein vollen Balken. "<strong>background-color: #000000;</strong>" Wird mir in der Druckvorschau nicht angezeigt.</p> <p>Besten Dank für die Hilfe, Koe</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 210mm<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">left</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 5mm<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> 5mm<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1 hr</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 5mm<span class="token punctuation">;</span> <span class="token property">border-style</span><span class="token punctuation">:</span> solid<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000000<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #000000<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span> <span class="token comment">/* Muss am ende der CSS bzw nach der "body" deklaration erfolgen */</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 06:17:53 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710567?srt=yes#m1710567 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710567?srt=yes#m1710567 <p>Hallo koe,</p> <blockquote> <p>Dies funktioniert auch wunderbar. Doch sobald ich mir das ganze an der Druckvorschau anschaue, habe ich nur noch einen rechteckigen Kasten statt ein vollen Balken. "<strong>background-color: #000000;</strong>" Wird mir in der Druckvorschau nicht angezeigt.</p> </blockquote> <p>Wahrscheinlich ist das eine Einstellung der Browser: "Hintergrundfarben und -bilder drucken" oder ähnlich. Der MS Edge <a href="https://forum.selfhtml.org/m1703908" rel="noopener noreferrer">druckt(e) grundsätzlich keine Hintergründe</a>.</p> <blockquote> <p>Ich versuche gerade in CSS eine <hr>-Linie so zu formatieren damit diese einen schwarz ausgemalten Balken darstellt (Trennlinie eines Titels). Dieser Balken möchte ich in der Höhe anpassen können. Er sollte die volle Seitenbreite besitzen.</p> </blockquote> <p>hr hat die Bedeutung eines <strong>inhaltlichen</strong> Trenners. Ich glaube nicht, dass du das möchtest. Verwende die CSS-Eigenschaft border, zum Beispiel border-bottom.</p> <p>PS: Dein CSS ist stark verbesserungswürdig.</p> <ul> <li>Angaben in mm verwendet man eigentlich nur zum Ausdrucken</li> <li>absolute Positionierung des body sorgt dafür, dass der Inhalt wahrscheinlich auf vielen Geräten nicht (oder nur durch Scrollen erreichbar) sein wird</li> <li>einen linken Abstand von 25% kannst du auch mit margin erreichen.</li> <li>das <code>@media: print</code> muss um die gesamten Angaben</li> </ul> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 06:23:43 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710568?srt=yes#m1710568 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710568?srt=yes#m1710568 <p>Hallo</p> <p>Da du das hr-Element offensichtlich zum Layouten mißbrauchst sind deine Probleme nicht weiter verwunderlich. Die Browser versuchen html-Elemente ihrem Sinn nach anzuzeigen, auch beim Drucken.</p> <p>Am sinnvollsten wäre deshalb das hr-Element einfach wegzulassen. Aber damit bist du erfahrungsgemäß bei solchen Fragen wahrscheinlich überfordert.</p> <p>Wenn du deine Linie bei voller Druck-Kontrolle beibehalten willst solltst du sie durch eine Grafik im SVG-Format ersetzen.</p> <p>Gruss</p> <p>MrMurphy</p> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 07:18:00 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710570?srt=yes#m1710570 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710570?srt=yes#m1710570 <p>@@Matthias Apsel</p> <blockquote> <p>hr hat die Bedeutung eines <strong>inhaltlichen</strong> Trenners. Ich glaube nicht, dass du das möchtest.</p> </blockquote> <p>Fürs Stylesheet:</p> <pre><code class="block language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--error-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">--error-outline</span><span class="token punctuation">:</span> 0.5rem solid <span class="token function">var</span><span class="token punctuation">(</span>--error-color<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1 + hr, h2 + hr, h3 + hr, h4 + hr, h5 + hr, h6 + hr</span> <span class="token punctuation">{</span> <span class="token property">ERROR</span><span class="token punctuation">:</span> <span class="token string">'separator element `hr` misused for visual presentation'</span><span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--error-outline<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ist das nicht schon das dritte Mal in letzter Zeit, dass <code>hr</code> als horizontale Line missdeutet hier im Forum auftaucht?</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 13:18:29 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710607?srt=yes#m1710607 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710607?srt=yes#m1710607 <p>Hi Matthias,</p> <p>Besten Dank für die Verbesserungsvorschläge. Dies wird nicht im klassischen sinn einen Webseite. Ich möchte per HTML eine Dokumentation von Projekten erstellen. Die Einzelnen Seiten müssen einfach ausdruckbar A4 sein. Daher habe ich die Breite auch in 210mm Angegeben. Ich werde auch kein Navigationsmenü erstellen sondern Für jedes Thema eine neue HTML Seite erstellen, diese sollten so gut als möglich Identisch sein.</p> <p>Da ich ein 24" Monitor besitze möchte ich die komplette 210mm Breite Seite in der mitte des Bildschirms. Daher stellt sich mir nun die Frage was ist nun der richtige weg "margin" oder "left" ?</p> <p><a href="/images/2a900236-4784-4f0e-bcf2-d53b680ee69c.png" rel="noopener noreferrer"><img src="/images/2a900236-4784-4f0e-bcf2-d53b680ee69c.png?size=medium" alt="" loading="lazy"></a></p> <p>Leider stosse ich immer wieder auf schwierigkeiten wenn ich nicht in absoluten Angaben die Webseite Programmiere. z.b das ich den Body nicht mittig ausrichten kann. Naja dies könnte auch daher kommen das ich nicht "margin" benutzt habe.</p> <p>Besten Dank,</p> <p>Freundliche Grüsse Koe</p> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 07:13:57 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710569?srt=yes#m1710569 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710569?srt=yes#m1710569 <p>Hallo MrMurphy1,</p> <blockquote> <p>… deine Probleme nicht weiter verwunderlich …</p> <p>… bist du erfahrungsgemäß … wahrscheinlich überfordert …</p> </blockquote> <p>Welche Laus ist dir denn über die Leber gelaufen?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 07:22:48 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710571?srt=yes#m1710571 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710571?srt=yes#m1710571 <p>Hallo Gunnar Bittersmann,</p> <blockquote> <pre><code class="block language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--error-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">--error-outline</span><span class="token punctuation">:</span> 0.5rem solid <span class="token function">var</span><span class="token punctuation">(</span>--error-color<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1 + hr, h2 + hr, h3 + hr, h4 + hr, h5 + hr, h6 + hr</span> <span class="token punctuation">{</span> <span class="token property">ERROR</span><span class="token punctuation">:</span> <span class="token string">'separator element `hr` misused for visual presentation'</span><span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--error-outline<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ist das nicht schon das dritte Mal in letzter Zeit, dass <code>hr</code> als horizontale Line missdeutet hier im Forum auftaucht?</p> </blockquote> <p>Ja. In diesem Fall als Nachfahre von h1.</p> <pre><code class="block language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--error-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token property">--error-outline</span><span class="token punctuation">:</span> 0.5rem solid <span class="token function">var</span><span class="token punctuation">(</span>--error-color<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">h1 + hr, h1 hr, h2 + hr, h2 hr, h3 + hr, h3 hr, h4 + hr, h4 hr, h5 + hr, h5 hr, h6 + hr, h6 hr</span> <span class="token punctuation">{</span> <span class="token property">ERROR</span><span class="token punctuation">:</span> <span class="token string">'separator element `hr` misused for visual presentation'</span><span class="token punctuation">;</span> <span class="token property">outline</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--error-outline<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 13:30:02 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710611?srt=yes#m1710611 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710611?srt=yes#m1710611 <p>War nicht angemeldet, wusste nicht das man hier Antworten kann ohne sich anzumelden.</p> <p>""das @media: print muss um die gesamten Angaben""</p> <p>Wenn möglich musst du mir dies näher erläutern. Weis nicht genau was du mir damit sagen willst.</p> <p>Gruss, Koe</p> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 17:27:17 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710622?srt=yes#m1710622 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710622?srt=yes#m1710622 <p>Hallo Koe,</p> <p>wenn Du unbedingt erreichen willst, dass Bildschirm- und Druckansicht identisch sind, ok, dann kann man über eine Breite in mm reden. Aber die 210mm ergeben keinen Sinn. Je nach Browser und Benutzereinstellungen wird dein Dokument dann für den Druck automatisch skaliert, abgeschnitten oder gekachelt gedruckt. Du gibst nämlich selbst im Druck-Stylesheet nie die Papierbreite an, sondern die Inhaltsbreite. Die Anpassung auf die Papierbreite erfolgt mit margins, bzw. den Browser-Einstellungen.</p> <p>Du musst beim Drucken auch beachten, dass die von Dir im CSS angegebenen Ränder sich immer innerhalb der vom Drucker gesetzten Ränder bewegen. Ein margin-left:20mm sind auf dem Papier mehr. Das hängt vom Druckertreiber ab, und vielleicht auch vom Browser. Hier musst Du schauen, was für Dich passt.</p> <p>Meine Empfehlung wäre für den body übergreifend eine Breite von 160-170mm, und im @media print {} Bereich des Stylesheet ein margin-left von 20mm.</p> <p>Im @media screen {} Bereich des Stylesheet setzt Du für body den Wert margin:auto, dann zentriert er auf dem Bildschirm automatisch. Ist der Bildschirm zu schmal, gibt's einen horizontalen Scrollbar.</p> <p>Dass Du den <hr> durch ein SVG-Bild oder einfacher durch ein border-bottom am h1 ersetzen solltest, hatten wir ja schon. Befasse Dich für die Druckaufbereitung auch noch mit den <a href="http://wiki.selfhtml.org/wiki/CSS/Tutorials/Print-CSS" rel="nofollow noopener noreferrer">CSS Eigenschaften für den Seitenumbruch</a>, um sicherzustellen, dass Überschrift und erster Textabsatz nicht getrennt werden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> <hr> background in druckvorschau nicht angezeigt Sat, 23 Dec 17 12:38:49 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710633?srt=yes#m1710633 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710633?srt=yes#m1710633 <p>Hallo,</p> <blockquote> <p>Dies wird nicht im klassischen sinn einen Webseite. Ich möchte per HTML eine Dokumentation von Projekten erstellen. Die Einzelnen Seiten müssen einfach ausdruckbar A4 sein. Daher habe ich die Breite auch in 210mm Angegeben. Ich werde auch kein Navigationsmenü erstellen sondern Für jedes Thema eine neue HTML Seite erstellen, diese sollten so gut als möglich Identisch sein.</p> </blockquote> <p>warum dann HTML? Wäre irgendein Office-Programm und dann Export nach PDF nicht die bessere Lösung?</p> <p>Gruß<br> Jürgen</p> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 16:34:46 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710618?srt=yes#m1710618 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710618?srt=yes#m1710618 <p>Hallo koe,</p> <blockquote> <p>""das @media: print muss um die gesamten Angaben""</p> <p>Wenn möglich musst du mir dies näher erläutern. Weis nicht genau was du mir damit sagen willst.</p> </blockquote> <p>Eine Angabe wie <code>width:210mm</code> ist eigentlich nur für den Drucker sinnvoll. Deshalb war ich der Meinung, es handelt sich schon um dein Druckstylesheet.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 19:51:45 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710625?srt=yes#m1710625 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710625?srt=yes#m1710625 <p>Vielen Dank für die Hilfestellung.</p> <p>Was ich aber nun nicht begreife ist das "Druckstylesheet". Ist es möglich mehrere Stylesheets in einem HTML Dokument zu laden ? Kommen sich diese nicht in die Quere ?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<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>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>printstyle.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Also kann ich diese so einbinden ?</p> <p>Gruss Koe</p> <hr> background in druckvorschau nicht angezeigt Sat, 23 Dec 17 19:37:23 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710636?srt=yes#m1710636 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710636?srt=yes#m1710636 <p>Hej Rolf,</p> <blockquote> <p>Befasse Dich für die Druckaufbereitung auch noch mit den <a href="http://wiki.selfhtml.org/wiki/CSS/Tutorials/Print-CSS" rel="nofollow noopener noreferrer">CSS Eigenschaften für den Seitenumbruch</a>, um sicherzustellen, dass Überschrift und erster Textabsatz nicht getrennt werden.</p> </blockquote> <p>In welchen Browsern funktioniert das denn? Einer reicht ja vermutlich, da es angeblich nur um den Ausdruck geht. Aber warum dann html statt PDF?</p> <p>Marc</p> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 20:53:38 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710626?srt=yes#m1710626 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710626?srt=yes#m1710626 <p>Hallo @koe,</p> <p>schau mal, was <a href="http://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS#Einbinden_einer_externen_Datei" rel="nofollow noopener noreferrer">im Wiki</a> steht.</p> <p>Viele Grüße<br> Robert</p> <hr> background in druckvorschau nicht angezeigt Fri, 22 Dec 17 22:12:20 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710629?srt=yes#m1710629 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710629?srt=yes#m1710629 <p>Yup, und dann noch <a href="http://wiki.selfhtml.org/wiki/CSS/Media_Queries" rel="nofollow noopener noreferrer">hier</a> und <a href="http://wiki.selfhtml.org/wiki/CSS/@-Regeln#Medienspezifisches_Einbinden_von_Stylesheets" rel="nofollow noopener noreferrer">hier</a> und was weiß ich wo noch </p> <p>Dieses Thema lässt sich in mehreren Varianten lösen, und ich bin gar nicht sicher, was state-of-the-art ist.</p> <p>Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann.</p> <p>Liege ich damit richtig?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> <hr> background in druckvorschau nicht angezeigt Sat, 23 Dec 17 05:50:10 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710630?srt=yes#m1710630 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710630?srt=yes#m1710630 <p>@@Rolf B</p> <blockquote> <p>Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann.</p> <p>Liege ich damit richtig?</p> </blockquote> <p>Nein.</p> <p>Als <strong>Nutzer</strong> möchte man, dass Webseiten möglichst <strong>schnell</strong> laden. Wenn wir nicht über HTTP/2 sprechen, heißt das: möglichst wenig HTTP-Requests. <em>Ein</em> Stylesheet, nicht mehrere. <em>Ein</em> Stylesheet, nicht zwei.</p> <p>Als <strong>Entwickler</strong> möchte man, dass Code möglichst <strong>wartbar</strong> ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: <em>Ein</em> Stylesheet, nicht mehrere. <em>Ein</em> Stylesheet, nicht zwei.</p> <p>Nicht mehrere <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>, nicht <code class="language-css">@<span class="token function">import</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> im Stylesheet.</p> <p>In dem <em>einen</em> Stylesheet werden dann per <em lang="en">media queries</em> gezielt Angaben für bestimmte Ausgabemedien gemacht. Bspw.</p> <pre><code class="block language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> 1em/1.4 Georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span> <span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 12pt<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">nav</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span> <span class="token selector">nav</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 70%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a:focus, a:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 80%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> print</span> <span class="token punctuation">{</span> <span class="token selector">a, a:focus, a:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">' ('</span> <span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span> <span class="token string">')'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> <hr> background in druckvorschau nicht angezeigt Sat, 23 Dec 17 11:10:06 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710632?srt=yes#m1710632 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710632?srt=yes#m1710632 <p>Hi,</p> <blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span>print<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> a<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>focus<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>hover </code></pre> </blockquote> <p>gilt a:focus bei print dann, wenn man mit dem Finger auf's Papier drückt? Und a:hover bei print, wenn man mit dem Finger drüber ist, aber noch nicht draufdrückt? Kann man bei print für a:focus und a:hover auch andere Regeln angeben als für a? So daß sich die Schrift auf dem Papier umfärbt bei a:focus usw.? </p> <p>cu,<br> Andreas a/k/a MudGuard</p> <hr> background in druckvorschau nicht angezeigt Sat, 23 Dec 17 13:44:18 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710634?srt=yes#m1710634 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710634?srt=yes#m1710634 <p>@@MudGuard</p> <blockquote> <blockquote> <p><code class="language-css bad">@media <span class="token punctuation">(</span>print<span class="token punctuation">)</span></code></p> </blockquote> </blockquote> <p>funzt nicht. Es muss <code class="language-css good">@media print</code> (ohne Klammern) heißen. In meinem Posting berichtigt.</p> <blockquote> <blockquote> <p><code class="language-css">a<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>focus<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>hover</code></p> </blockquote> <p>gilt a:focus bei print dann, wenn man mit dem Finger auf's Papier drückt? Und a:hover bei print, wenn man mit dem Finger drüber ist, aber noch nicht draufdrückt?</p> </blockquote> <p>Menno, <code class="language-css"><span class="token property">a</span><span class="token punctuation">:</span>focus<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>hover</code> hatte ich extra noch nachträglich hinzugefügt.</p> <p>Ich würde denken, <code class="language-css"><span class="token property">a</span><span class="token punctuation">:</span>focus</code> gilt dann, wenn man <strong>im Browser</strong> den Link fokussiert hat während der Print-Befehl ausgeführt wird. Allerdings kommt dann ja das Dialogfenster, das den Fokus aus dem Browserfenster nimmt? Es ist mir noch nicht geglückt, <code class="language-css"><span class="token property">a</span><span class="token punctuation">:</span>focus</code> (oder <code class="language-css"><span class="token property">a</span><span class="token punctuation">:</span>hover</code>) beim Drucken wirken zu lassen.</p> <p>Was nicht unbedingt heißen soll, dass das wirklich nie der Fall sein kann. Mit <code class="language-css">a<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>focus<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>hover</code> ist man auf der sicheren Seite.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> <hr> background in druckvorschau nicht angezeigt Sat, 23 Dec 17 17:04:00 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710635?srt=yes#m1710635 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710635?srt=yes#m1710635 <ol> <li>Kann damit gerade meine HTML/CSS kenntnisse Verbessern.</li> <li>Ich bin unabhängig von Office.</li> <li>Kann alles <strong>exakt</strong> so gestalten wie ich es haben möchte.</li> </ol> <p>PDF währe auch eine Lösung. Nur sobald ich in einem Thema neue Erkenntnisse mache und diese nachtragen möchte wird es relativ mühsam.</p> <p>Dies sind so meine Hauptgründe.</p> <p>Gruss, Koe</p> <hr> background in druckvorschau nicht angezeigt Sat, 23 Dec 17 20:00:35 Z https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710637?srt=yes#m1710637 https://forum.selfhtml.org/self/2017/dec/22/hr-background-in-druckvorschau-nicht-angezeigt/1710637?srt=yes#m1710637 <p>Hallo koe,</p> <ol> <li>ist sicherlich eine gute Idee</li> <li>ist ein schwacher Grund. Es gibt Office-Pakete die kostenlos sind und plattformübergreifend verfügbar.</li> <li>ist gar kein Grund; ich würde behaupten, dass Du mit einem Office-Paket genauso viel oder sogar mehr Möglichkeiten hast wie mit HTML/CSS. Wenn du das anders siehst, befindet sich das Defizit<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> vor dem Bildschirm, nicht im Office-Paket. Zumindest nicht dann, wenn das Ding seinen Namen verdient.</li> </ol> <p>Das Kriterium für die Entscheidung HTML/CSS vs Office-Paket sollte sein, inwieweit Dich die gewählte Lösung bei der Arbeit unterstützt. Wer Dokumente verfasst, sollte sich auf Inhalte konzentrieren. Das gewählte Werkzeug soll nicht vom Inhalt ablenken. Vermutlich wäre <strong>ich</strong> mit Word viel schneller fertig als mit HTML. Was daran liegen mag, dass mein HTML Toolset suboptimal ist.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Defizit: im Sinne von Erfahrung im Gebrauch der Software <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section>