News & Rumors: 27. November 2008,

CSS: Hintergrundbilder klickbar machen

Screenshot Mobile-Helden: CSS Hintergrund klickbar
Screenshot Mobile-Helden: CSS Hintergrund klickbar

Für eine Webseite wollte ich gerne das via CSS-Stilvorlage eingebundene Hintergrundbild im Header des Dokuments klickbar machen. Das ist nicht so einfach, wie es sich auf den ersten Blick anhört.

Angenommen in der Stilvorlage für den Header-Container findet sich eine Angabe zur Verwendung eines Hintergrundbildes.

#header { background: url('header.png') no-repeat; }

Werbung

Im Quellcode der HTML-Datei findet sich dann einfach nur der DIV-Container. Ausmaße und Position werden über die Stilangaben an den Browser übergeben.

<div id="header"> ... </div>

Wenn man einen Anchor-Tag um den Div-Container legt, passiert nichts.

<div id="header"><a href="home.html"> ... </a></div>

Das liegt daran, dass der Div-Container im Prinzip leer ist. Lediglich alle Elemente, die von dem anchor-Tag eingeschlossen werden, wären klickbar. Das Hintergrundbild gehört nicht dazu. Über einen Umweg kriegen wir die Hintergrundgrafik dennoch klickbar. Und zwar übergeben wir die Stilangaben „#header“ an den anchor-Tag.

#header a { background: url('header.png') no-repeat; }

Nun ist der Link im #header-Div-Container derjenige, der das Hintergrundbild enthält. Damit dieser jedoch den kompletten Container ausfüllt, auch ohne Inhalt, müssen wir ihn mittels Stilangabe mit dem display-Attribut „block“ ausstatten. Die Stilangabe schaut dann am Ende wie folgt aus:

#header a { background: url('header.png') no-repeat; display: block; }

Et voilà, das Hintergrundbild ist klickbar.

Weitersagen

Zuletzt kommentiert



 2 Kommentar(e) bisher

  •  Dominik (7. Dezember 2008)

    Hey, super! Danke für den Tipp! Bin rein zufällig auf den Blog gestoßen!

    Grüße aus BaWü

  •  Alexander Trust (9. Dezember 2008)

    Danke.

    Grüße zurück.


Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.



Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Werbung