Disfunctions.de

Das Blog der gnadenlosen Fehlfunktionen!

Hintergrundbilder valide verlinken

Erstellt von Matthias am Dienstag 25. Januar 2011

Ich hatte kürzlich das Problem, in einem Header einer Webseite verschiedene Hintergrundbilder zu haben, die auf verschiedene interne wie externe Seiten verlinken sollten. Dazu hatte ich erst folgenden Code benutzt.


<div id="header">
	<a href="http://link-zur-seite.tld" title="Titel zur verlinkten Seite"><div id="header1"></div></a>
	<a href="http://link-zur-seite.tld" title="Titel zur verlinkten Seite"><div id="header2"></div></a>
	<a href="http://link-zur-seite.tld" title="Titel zur verlinkten Seite"><div id="header3"></div></a>
	<a href="http://link-zur-seite.tld" title="Titel zur verlinkten Seite"><div id="header4"></div></a>
</div>

Die divs header1 bis header4 konnte ich dann schön im CSS positionieren, mit einem Hintergrundbild versehen und so weiter.


div#header1 {
background:transparent url(../images/header1.png) no-repeat scroll 0 0;
float:left;
height:94px;
left:0;
margin-left:16px;
margin-top:8px;
position:absolute;
top:0;
width:740px;
}

Dummerweise funktioniert die Methode zwar gut, ist aber nach den Standards nicht Valide. Um das ganze valide umzusetzen, muss man beachten, dass divs nicht in einem inline Element wie dem a-Element vorkommen dürfen. Um dies zu machen, muss man etwas anders vorgehen, bei mir sieht der Code dann wie folgt aus:


<div id="logo">
	<a class="header1" href="http://link-zur-seite.tld" title="Titel zur verlinkten Seite"></a>
	<a class="header2" href="http://link-zur-seite.tld" title="Titel zur verlinkten Seite"></a>
	<a class="header3" href="http://link-zur-seite.tld" title="Titel zur verlinkten Seite"></a>	
	<a class="header4" href="http://link-zur-seite.tld" title="Titel zur verlinkten Seite"></a>
</div>

Man gibt dem a-Element einfach noch eine Klasse mitels class=“header1″ mit. Damit kann man im CSS die Link Fläche auch positionieren und mit Hintergrundbild versehen und gleichzeitig bleibt der Code Valide. Im CSS muss man noch eine kleine Anpassung vornehmen, aus div#header1 wieder daher a.header1.


a.header1 {
background:transparent url(../images/header1.png) no-repeat scroll 0 0;
float:left;
height:94px;
left:0;
margin-left:16px;
margin-top:8px;
position:absolute;
top:0;
width:740px;
}

Nun ist sowohl der HTML Code als auch das CSS Valide und alles funktioniert. Insgesamt eine sehr schöne und schlanke Lösung, man muss nur erst mal drauf kommen. 😉

Kommentar schreiben

XHTML: Sie können diese Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>