Links über gesamte Box ohne JavaScript spannen

Gesamtes Element klickbar machen

Links über gesamte Box ohne JavaScript spannen

Viele Seiten im Netz verwenden oft für Teaser den gleichen Link mehrmals nur damit Bild, Überschrift und der "Weiterlesen"-Text verlinkt sind. Gerade für SEO-Optimierungen sollte versucht werden auf doppelte Verlinkungen zu verzichten. Auch JavaScript wird oft eingesetzt um die gesamte Fläche von Elementen klickbar zu machen. Aber diese Usability- und SEO-Optimierung lässt sich auch mit CSS realisieren.

Das Artikelbild zeigt meine ersten Versuche Links von Innen heraus über eine Box zu spannen. Die Ursprünge dieser Technik stammen noch aus XHTML-Zeiten. Ziel war es, valides HTML zu erzeugen. Erst ab HTML5 können Links auch Block-Elemente enthalten. In HTML5-Seiten kann diese Technik dennoch gut für SEO-Maßnahmen genutzt werden.

Und so funktioniert es: Ein Link wird mit padding aufgeblasen und mit gleichen Werten jedoch negativem margin zurück an seine Position gesetzt. Der Block-Charakter und relative Positionierung helfen dem Link über den vorherigen und folgenden Inhalt zu ragen. Ein transparentes Pixel im background sorgt für Cross-Browser-Support. Damit der Link nicht über die Box hinausragt wird die überstehende Linkfläche mit overflow: hidden; und position: relative; abgeschnitten.

Befinden sich noch weitere Links in dem Text müssen diese mit CSS angepasst werden, damit sie über den Boxlink stehen und klickbar werden.

Struktur

<div class="teaser clearfix">
    <div class="picture"><img alt="" src="bild.jpg" /></div>
    <div class="text">
        <p class="title"><a href="#">Link</a></p>
        <p>Text</p>
    </div>
</div>

CSS

<style type="text/css">

.teaser {
    position: relative; /* IE overflow: hidden reicht nicht aus */
    overflow: hidden;
    margin: 0 0 24px;
    width: 100%; /* IE7 */
}

.teaser .picture {
    float: left;
    padding: 0 20px 0 0;
    line-height: 0;
}

.teaser .text {display: table-cell;}

* html .teaser .text {display: inline-block;} /* IE6 */
*+ html .teaser .text {display: inline-block;} /* IE7 */

.teaser .title {display: inline-block;}

.teaser .title a {
    position: relative;
    z-index: 1;
    display: block;
    margin: -1000px;
    padding: 1000px;
    background: url(/blank.gif); /* Legacy Fallback 1x1 transparentes Pixel */
    background-image: linear-gradient(transparent, transparent), url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}

* html .teaser .title a {zoom: 1;} /* IE6 */
*+ html .teaser .title a {zoom: 1;} /* IE7 */
</style>

Damit zusätzlich andere Links im Text angeklickt werden können

<style type="text/css">
.teaser a {
    position: relative;
    z-index: 2;
</style>
Impressum