Block-Element als Link

Aus dem Webdesign-Alltag: Um ein ganzes Block-Element (z.B. das div-Element) mit einer Verlinkung zu versehen, reicht es normalerweise, über das Blockelement ein Hyperlink-Tag (<a></a>) zu legen,

d.h. die width- und height-Eigenschaft des Hyperlink-Tags auf 100 %, "position" auf "absolute" und "left" und "top" auf 0 zu setzen (Elternelement-Eigenschaft "position" sollte nicht "static" sein). Diese Methode funktioniert wunderbar in allen gebräuchlichen Browsern - im Internet Explorer jedoch nur bedingt. Im IE können Bereiche entstehen, die beim Überfahren mit der Maus von der Verlinkung ausgenommen sind. Hier hilft der folgende Workaround: Bevor wir den Hyperlink-Tag über das Blockelement ausbreiten, bedecken wir das zu verlinkende Block-Element mit einem weiteren Blockelement, welches ein transparentes Hintergrundbild erhält (background-image). Dann stellt auch der IE kein Problem mehr da.

... zurück zum Blog