MACNOTES

Veröffentlicht am  27.11.08, 3:20 Uhr von  Alexander Trust

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; }

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.

 Und wie ist deine Meinung?  Schreib uns einfach!

 2 Kommentar(e) bisher

  •  Dominik sagte am 7. Dezember 2008:

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

    Grüße aus BaWü

    Antworten 
  •  Alexander Trust sagte am 9. Dezember 2008:

    Danke.

    Grüße zurück.

    Antworten 

Kommentar verfassen

Werbung
© 2006-2013 MACNOTES.DE. Made with insanely great for all things Mac. Apple.de