Eigene Bilder für Display und Druck
 

Hi,
ich habe in meinem Web-Labor eine spezielle CSS-Datei für die Druckausgabe eingerichtet, sodass die Seiten für den Druck nochmal speziell optimiert werden können. Z.B. benötigt die Navigation links viel Platz und ist beim Druck sowieso wenig nützlich. Jetzt habe ich aber das Design geändert und den Kopfbereich der Seite dunkler gestaltet. Das Logo hat demnach weiße Schrift. Um nicht zuviel Farbe zu verbrauchen, braucht man ja auch das bunte Hintergrundbild nicht mitdrucken. Damit man aber vom Logo nochwas lesen kann, hab ich stattdessen einen mittleren Grauton definiert. Üblicherweise sind die Web-Browser heute aber so konfiguriert, dass sie Hintergründe gar nicht drucken. Also egal, was ich da oben einstell, das Logo mit seiner weißen Schrift muss vor einem weißen Hintergrund stehen, wenn der Benutzer hier nicht eingreift und den Druck von Hintergründen aktiviert.

Ich habe das Logo noch von früher mit dunkler Schrift und würde das gerne für den Druck einsetzen. Die einzige Methode, die mir dazu einfällt, ist das Bild doppelt in die Seite einzufügen, und je nach verwendetem Stylesheet (display (Standard) oder print) das eine oder das andere <img> auszublenden. Dann würden aber immer beide Grafiken übertragen und in einfachen Browsern erscheint es immer doppelt. Weitere Experimente im Print-CSS mit background-image und list-style-image waren erfolglos.

Weiß hier jemand einen Weg, wie man ein bestimmtes Bild in einer HTML-Seite für den Druck auswechseln kann, ohne dass es die sonstige Zeit stört? Den Link zur Seite gibt's in meiner Signatur, zum Anschauen der Lage. :) Ausprobieren kann man das ganze mit der Druckvorschau des Browsers (getestet in Firefox 1.5 und IE 7).

Binde das Logo als Listenelement ein, da wird alles mitgedruckt und das kannst du via CSS verändern.

Ah, danke! Das „display: list-item“ war mir grad nicht geläufig. Funktioniert jetzt im Firefox 2 und IE 7. Opera 9 mag nicht, aber ok.