Logo drucken 20. August 2004 um 00:00 Uhr /

Vielleicht hattet ihr auch schon einmal den Fall, dass ihr eine Seite gebastelt habt, deren Hintergrund Schwarz - bzw. dunkel ist - und ihr ein Logo mit weißer Schrift einbauen musstet. Wenn man dieses Logo druckt sieht es natürlich ziemlich schlecht aus, denn man hat da einen schwarzen Balken auf dem Blatt Papier.

Früher war es üblich auf jeder Seite noch einen Button anzubieten . Dort konnte man dann auch wunderbar ein Bild einfügen welches dann auch zum Drucken geeignet war.

Heutzutage wollen wir eine Druckversion doch eigentlich per CSS lösen, ohne, dass der Besucher den ganzen Inhalt noch einmal herunterladen muss. Dazu ein paar kleine Vorbereitungen. Wir brauchen als allererstes einmal zwei Versionen des Logos, eine für den Bildschirm mit dem Dunklen Hintergrund, und eine zum Ausdrucken mit dem weißen Hintergrund:

Logo mit schwarzem Hintergrund
Logo für den Bildschirm.

Logo mit weißem Hintergrund
Logo für den Drucker.

Das HTML dazu ist eigentlich wie man es auch schon gewohnt ist, man bindet das Logo innerhalb eines Links welcher zur Startseite Zeigt an. Das außergewöhnliche daran ist aber, dass wir jetzt nicht das Logo für den Bildschirm einsetzen sondern das Logo für den Drucker.

HTML

<a href="/" id="logo">
 <img src="img/logo_print.png" alt="Mein Logo" />
</a>

So jetzt kommen die Daten für die beiden Dateien: screen.css - welche für die Ausgabe am Bildschirm verantwortlich ist und print.css für den Drucker.

screen.css

a#logo img { visibility: hidden; }
a#logo {
 background: url(/img/logo.png) no-repeat transparent;
 width: 300px;
 height: 70px;
 display: block;
}

print.css

#logo img { border: 0; }

Die Erklärung dazu: mit visibility: hidden lassen wir für den Bildschirm das Drucklogo erst einmal verschwinden. Dann nehmen wir uns den Link - welcher zurück zur Startseite zeigt und auf jeder Seite vorhanden sein sollte - vor. Diesen Link machen wir genau so groß wie das Logo-Bild in Original auch ist, also hier width: 300px; und height: 70px;. Inlineelemente, wie es auch ein Link ist, dürfen keine Höhe enthalten, und obwohl es der IE falsch interpretiert, und die Höhe darauf anwendet, müssen wir diesen Link mit display: block; zu einem Block Element machen um ihm dann Breite und Höhe zuweisen zu können. Denn es gibt noch andere Browser als diesen.

Und schließlich weisen wir dem Link noch als Hintergrundbild das Richtige Logo für den Bildschirm zu, und die Illusion ist perfekt. Man kann genau so drauf klicken als ob es ein ganz normales <img> währe.

Dann machen wir noch eine kleine Schönheitsoperation an der CSS Datei für den Drucker und entfernen den lästigen Rahmen, der um Bildlinks immer gemacht wird. Ich habe auch eine Beispielseite erstellt.

Falls ihr Verbesserungsvorschläge habt, immer her damit. Oder gibt es noch elegantere Lösungen?

Kommentare

Die Kommentare sind für diesen Eintrag geschlossen.