[ Solved – 11 Answers ] CSS – HTML – Make a div into a link

PROBLEM :

• We have a <div> block with some fancy visual content that we don’t want to change. we want to make it a clickable link.
• It something like <a href=”…”><div> … </div></a>, but that is valid XHTML 1.1.

SOLUTION 1:

• You can’t make the div a link itself, but you can make an <a> tag act as a block, the same behaviour a <div> has.

[pastacode lang=”css” manual=”a%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A” message=”Css Code” highlight=”” provider=”manual”/] [ad type=”banner”]

You can then set the width and height on it.

SOLUTION 2:

• Requires a little javascript. But, your div would be clickable.

[pastacode lang=”markup” manual=”%3Cdiv%20onclick%3D%22location.href%3D’http%3A%2F%2Fwww.example.com’%3B%22%20%09style%3D%22cursor%3Apointer%3B%22%3E%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 3:

• This is a “valid” solution to achieving what you want.

[pastacode lang=”markup” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A.myspan%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Ca%20href%3D%22%23%22%3E%3Cspan%20class%3D%22myspan%22%3Etext%3C%2Fspan%3E%3C%2Fa%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

But most-likely what you really want is to have an <a> tag displayed as a block level element.

SOLUTION 4:

• HTML:

[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22feature%22%3E%0A%20%20%20%20%20%20%20%3Ca%20href%3D%22http%3A%2F%2Fwww.example.com%22%3E%3C%2Fa%3E%0A%20%3C%2Fdiv%3E%0A” message=”Html code” highlight=”” provider=”manual”/]

• CSS:

[pastacode lang=”css” manual=”div.feature%20%7B%0A%20%20%20%20%20%20%20%20position%3A%20relative%3B%20%20%20%20%7D%0A%20%20%20%20div.feature%20a%20%7B%0A%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20top%3A%200%3B%0A%20%20%20%20%20%20%20%20left%3A%200%3B%0A%20%20%20%20%20%20%20%20text-decoration%3A%20none%3B%20%2F*%20No%20underlines%20on%20the%20link%20*%2F%0A%20%20%20%20%20%20%20%20z-index%3A%2010%3B%20%2F*%20Places%20the%20link%20above%20everything%20else%20in%20the%20div%20*%2F%0A%20%20%20%20%20%20%20%20background-color%3A%20%23FFF%3B%20%2F*%20Fix%20to%20make%20div%20clickable%20in%20IE%20*%2F%0A%20%20%20%20%20%20%20%20opacity%3A%200%3B%20%2F*%20Fix%20to%20make%20div%20clickable%20in%20IE%20*%2F%0A%20%20%20%20%20%20%20%20filter%3A%20alpha(opacity%3D1)%3B%20%2F*%20Fix%20to%20make%20div%20clickable%20in%20IE%20*%2F%0A%20%20%20%20%7D%0A” message=”Css Code” highlight=”” provider=”manual”/]

SOLUTION 5:

Open in new window :

• Here’s how to make a div into a clickable link that will open the target URL into a new window.

[pastacode lang=”markup” manual=”%3Cdiv%20onclick%3D%22window.open(‘http%3A%2F%2Fwww.brightcherry.co.uk%2F’)%3B%22%3E%0A%20%3C%2Fdiv%3E%0A” message=”Html code” highlight=”” provider=”manual”/]

[ad type=”banner”]

Open in same window :

• Here’s how to make a div into a clickable link that will open the target URL into the same window.

[pastacode lang=”markup” manual=”%3Cdiv%20onclick%3D%22window.location%20%3D%20’http%3A%2F%2Fwww.brightcherry.co.uk%2F’%3B%22%3E%0A%20%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 6:

• The code :

[pastacode lang=”markup” manual=”%20%20%3Cdiv%20style%3D’position%3Arelative%3Bbackground-color%3A%23000000%3Bwidth%3A600px%3Bheight%3A30px%3Bborder%3Asolid%3B’%3E%0A%20%20%20%20%3Cp%20style%3D’display%3Ainline%3Bcolor%3A%23ffffff%3Bfloat%3Aleft%3B’%3EWhatever%3C%2Fp%3E%20%20%20%20%20%0A%20%20%20%20%3Ca%20style%3D’position%3Aabsolute%3Btop%3A0px%3Bleft%3A0px%3Bwidth%3A100%25%3Bheight%3A100%25%3Bdisplay%3Ainline%3B’%20href%20%3D’%23’%3E%3C%2Fa%3E%0A%20%20%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 7:

• You could also try by wrapping an anchor, then turning its height and width to be the same with its parent.

[pastacode lang=”markup” manual=”%3Cdiv%20id%3D%22css_ID%22%3E%0A%20%20%20%20%3Ca%20href%3D%22http%3A%2F%2Fwww.your_link.com%22%20style%3D%22display%3Ablock%3B%20height%3A100%25%3B%20width%3A100%25%3B%22%3E%3C%2Fa%3E%0A%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 8:

• This is one of the solution :

[pastacode lang=”markup” manual=”%3Cdiv%20style%3D%22position%3A%20relative%3B%20width%3A191px%3B%20height%3A83px%3B%22%3E%0A%20%20%20%20%3Ca%20href%3D%22link.php%22%20style%3D%22display%3Ablock%3B%20width%3A100%25%3B%20height%3A100%25%3B%22%3E%3C%2Fa%3E%0A%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

[ad type=”banner”]

SOLUTION 9:

• Try this code :

[pastacode lang=”markup” manual=”%3Cdiv%20onclick%3D%22location.href%3D’page.html’%3B%22%20%20style%3D%22cursor%3Apointer%3B%22%3E…%3C%2Fdiv%3E%0A” message=”Html Code” highlight=”” provider=”manual”/]

SOLUTION 10:

• You can give a link to your div by following method:

[pastacode lang=”css” manual=”%3Cdiv%20class%3D%22boxdiv%22%20onClick%3D%22window.location.href%3D’https%3A%2F%2Fwww.google.co.in%2F’%22%3Egoogle%3C%2Fdiv%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A.boxdiv%20%7B%0A%20%20%20%20cursor%3Apointer%3B%0A%20%20%20%20width%3A200px%3B%0A%20%20%20%20height%3A200px%3B%0A%20%20%20%20background-color%3A%23FF0000%3B%0A%20%20%20%20color%3A%23fff%3B%0A%20%20%20%20text-align%3Acenter%3B%0A%20%20%20%20font%3A13px%2F17px%20Arial%2C%20Helvetica%2C%20sans-serif%3B%0A%20%20%20%20%7D%0A%3C%2Fstyle%3E%0A” message=”Css Code” highlight=”” provider=”manual”/]

[ad type=”banner”]

SOLUTION 11:

• You can make surround the element with a href tags or you can use jquery and use

[pastacode lang=”css” manual=”%24(”).click(function(e)%7B%0Ae.preventDefault()%3B%0A%2F%2FDO%20SOMETHING%0A%7D)%3B%0A” message=”Css Code” highlight=”” provider=”manual”/]