only a blog

Ich bin mittlerweile ein paar Mal gefragt worden, wie man aus folgendem Code ein Logo mit dem Verhalten macht, wie es auf kurier.at zu finden ist.

<h1><a href="index.html" href="index.html" title="zurück zur Startseite"><img src="logo.gif" width="151" height="30" alt="kurier.at" /></a></h1>

Die meisten von euch werden sicher wissen, wie man so etwas anstellt. Wenn es aber wenigstens für einen interessant ist, war’s die Mühe Wert. Also los geht’s …

Die Aufgabenstellung

Das Logo sollte auf der Homepage einen Rahmen und eine leichte Schattierung im Hintergrund haben. Es durfte nicht als Hintergrundbild im CSS-File definiert sein, da es auch in der Printversion erscheinen soll. Dort allerdings ohne Rahmen, um auf weißem Hintergrund zu vermeiden, dass das Endergebnis so aussieht:

In der Webversion sollte auch noch eine kleine optische Veränderung im hover-Zustand (ein aufblitzen der oberen Kante), den Gesamteindruck verfeinern, ohne das Logo mit Javascript austauschen zu müssen. Die letztlich verwendete Lösung ist wirklich simpel und wird trotzdem allen Anforderungen gerecht. Der Aufbau des ganzen sieht dann so aus:

Der Aufbau

Hier sieht man ganz gut, wie die drei Elemente <h1>, <a> und <img> als gestaltete Schichten übereinander gelegt werden. Jetzt sehen wir uns mal an, was das in der Praxis für unser CSS bedeutet.

CSS Magie

Führen wir uns noch ein Mal den Code vor Augen:

<h1><a href="index.html" href="index.html" title="zurück zur Startseite"><img src="logo.gif" width="151" height="30" alt="kurier.at" /></a></h1>

Die Headline <h1> erhält als Hintergrundbild den Rahmen inklusive Schatten per CSS. Im Print CSS gibt es diesen Hintergrund nicht (der bei Standardeinstellung so wie so nicht gedruckt wird), wodurch unser erstes Problem - die unterschiedliche Darstellung online/print - gelöst ist. Dass sieht dann, um kurierspezifische Anforderungen bereinigt, folgendermaßen aus:

h1 {
width: 159px;
height: 38px;
background: url(logo_bg.gif) no-repeat;
}

In Folge wird das <a> dazu verwendet, einen Container für unseren hover Effekt zu bilden. Das <a> ist genau einen Pixel höher als das Logo selbst und überdeckt den inneren roten Bereich des Hintergrundbildes sowie die obere helle Kante des Rahmens. Die korrekte Platzierung wird durch ein margin nach oben und links erreicht. In Normalstellung ist der Kasten transparent wodurch unser Code so aussieht:

h1 a {
margin: 3px 0 0 4px;
width: 151px;
height: 31px;
float: left;
}

Mittels einer Hintergrundfarbe in der hover-Stellung der Anchors legen wir den Grundstein für unsere aufblitzende Kante:

h1 a:hover {
background: #E89791;
}

Das ist es dann eigentlich auch schon gewesen. Wir müssen nur noch unser Logo um einen Pixel nach unten verschieben, damit die hellere Kante für das den hover-Status an der oberen Stelle zum Vorschein kommt:

h1 img {
margin-top: 1px;
}

Finito!

Nun sollte das Logo folgendermaßen aussehen:

Hier im Beispiel ist das ganze noch durch eine Hintergrundgrafik erweitert und das <h1> per margin mit Abstand versehen.

So, nun haben wir wirklich mit einfachsten Mitteln ein nettes Logo gezaubert, dass sich in der Print- und Onlineansicht anders verhält und völlig ohne Javascript auskommt (natürlich gäbe es auch noch andere Möglichkeiten, z.B. mit einer Top-Border beim Image). Insgesamt ist das für mich ein recht schönes Beispiel, wie man mit dem richtigen Zugang und simpelsten Mitteln, ein Problem per CSS lösen kann.