Gjøre en div til en klikkbar link. Er det mulig?

[MarKra]

Jeg har en boks på min side som er en div, inni denne boksen er en helt vanlig tekstlink, som fører til en annen side. Det jeg vil er at hele diven skal fungere som en link, slik at uansett hvor du trykker inni denne boksen blir du tatt til den nye siden. Er dette mulig å få til med bare HTML/CSS, eller må jeg til med Javascript?

[Haraldson]

Du kan vel bare kutte ut diven, sette display: block; + width & height på a-en, så skulle du være i mål...

[MarKra]

Greia er at det er en del annen informasjon i diven også - overskrift (Som er linken for øyeblikket), beskrivelse, bilde - så fjerne diven er ikke en mulighet.

[Haraldson]

Vel, om du skal holde deg til korrekt HTML, har du valget mellom å gå vekk fra div og benytte a med inline-elementer inni (span, em, strong etc.), å ha lenker inni flere elementer sånn at større deler av innholdet blir klikkbart, eller du kan simulere at boksen er klikkbar ved å posisjonere en tom a over innholdet i boksen (display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ). Problemet med sistnevnte metode er at det blir vanskelig å lage en god :hover-state.

Endret 10. april 2010 av Haraldson

[MarKra]

Diven inneholder flere andre diver, og en a kan vel ikke inneholde diver, så da er det vel enklere å bare beholde det sånn som det er tenker jeg.

[Wedvich]

Haraldson har egentlig allerede nevnt den greieste løsningen. Om det skal være korrekt HTML kan ikke en a inne holde div'er eller andre block-elementer nei, men inline-elementer som span går helt fint. Du kan erstatte div'ene inni a'en med span og sette display: block på a'en og span'ene, så oppnår du akkurat det du vil ha uten å røre Javascript.

[Øsse]

Er det uansett ulovlig å ha block-elementer inni en <a>, selv om man deklarerer a {display: block; } ?

[Kaptein Snus]

eller du kan simulere at boksen er klikkbar ved å posisjonere en tom a over innholdet i boksen (display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ). Problemet med sistnevnte metode er at det blir vanskelig å lage en god :hover-state.

Vil bare legge til at man kan ikke markere teksten når det det ligger en anchor over