{"id":2062,"date":"2017-03-24T15:21:34","date_gmt":"2017-03-24T09:51:34","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=2062"},"modified":"2017-03-28T16:33:14","modified_gmt":"2017-03-28T11:03:14","slug":"make-div-link","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/make-div-link\/","title":{"rendered":"[ Solved &#8211; 11 Answers ] CSS &#8211; HTML &#8211; Make a div into a link"},"content":{"rendered":"<p><label class=\"label label-Warning\">PROBLEM :<\/label><\/p>\n<ul>\n<li>We have a <div> block with some fancy visual content that we don\u2019t want to change. we want to make it a clickable link.<\/li>\n<li>It something like <a href=\u201d\u2026\u201d><div> \u2026 <\/div><\/a>, but that is valid XHTML 1.1.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"you-cant-make-the-div-a-link-itself-but-you-can-make-an-a-tag-act-as-a-block-the-same-behaviour-a-div-has\"><span style=\"color: #000000;\">You can\u2019t make the div a link itself, but you can make an <a> tag act as a block, the same behaviour a <div> has.<\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201da%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%7D%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p>You can then set the width and height on it.<\/p>\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"requires-a-little-javascript-but-your-div-would-be-clickable\"><span style=\"color: #000000;\">Requires a little javascript. But, your div would be clickable.<\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20onclick%3D%22location.href%3D\u2019http%3A%2F%2Fwww.example.com\u2019%3B%22%20%09style%3D%22cursor%3Apointer%3B%22%3E%3C%2Fdiv%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"this-is-a-valid-solution-to-achieving-what-you-want\"><span style=\"color: #000000;\">This is a \u201cvalid\u201d solution to achieving what you want.<\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p>But most-likely what you really want is to have an <a> tag displayed as a block level element.<\/p>\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"html\"><span style=\"color: #800000;\"><strong>HTML:<\/strong><\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dHtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>\n<h4 id=\"css\"><span style=\"color: #800080;\"><strong>CSS:<\/strong><\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201ddiv.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\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<h4 id=\"open-in-new-window\"><span style=\"color: #0000ff;\"><strong>Open in new window :<\/strong><\/span><\/h4>\n<ul>\n<li>Here\u2019s how to make a div into a clickable link that will open the target URL into a new window.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20onclick%3D%22window.open(\u2018http%3A%2F%2Fwww.brightcherry.co.uk%2F\u2019)%3B%22%3E%0A%20%3C%2Fdiv%3E%0A\u201d message=\u201dHtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p style=\"top: 198px;\">[ad type=\u201dbanner\u201d]\n<h4 id=\"open-in-same-window\"><span style=\"color: #800080;\">Open in same window :<\/span><\/h4>\n<ul>\n<li>Here\u2019s how to make a div into a clickable link that will open the target URL into the same window.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20onclick%3D%22window.location%20%3D%20\u2019http%3A%2F%2Fwww.brightcherry.co.uk%2F\u2019%3B%22%3E%0A%20%3C%2Fdiv%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"the-code\"><span style=\"color: #000000;\"><strong>The code :<\/strong><\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%20%20%3Cdiv%20style%3D\u2019position%3Arelative%3Bbackground-color%3A%23000000%3Bwidth%3A600px%3Bheight%3A30px%3Bborder%3Asolid%3B\u2019%3E%0A%20%20%20%20%3Cp%20style%3D\u2019display%3Ainline%3Bcolor%3A%23ffffff%3Bfloat%3Aleft%3B\u2019%3EWhatever%3C%2Fp%3E%20%20%20%20%20%0A%20%20%20%20%3Ca%20style%3D\u2019position%3Aabsolute%3Btop%3A0px%3Bleft%3A0px%3Bwidth%3A100%25%3Bheight%3A100%25%3Bdisplay%3Ainline%3B\u2019%20href%20%3D\u2019%23\u2019%3E%3C%2Fa%3E%0A%20%20%3C%2Fdiv%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>You could also try by wrapping an anchor, then turning its height and width to be the same with its parent.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 8:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"this-is-one-of-the-solution\"><span style=\"color: #000000;\">This is one of the solution :<\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p style=\"top: 198px;\">[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 9:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"try-this-code\"><span style=\"color: #000000;\">Try this code :<\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20onclick%3D%22location.href%3D\u2019page.html\u2019%3B%22%20%20style%3D%22cursor%3Apointer%3B%22%3E\u2026%3C%2Fdiv%3E%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 10:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"you-can-give-a-link-to-your-div-by-following-method\"><span style=\"color: #000000;\">You can give a link to your div by following method:<\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Cdiv%20class%3D%22boxdiv%22%20onClick%3D%22window.location.href%3D\u2019https%3A%2F%2Fwww.google.co.in%2F\u2019%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\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p style=\"top: 198px;\">[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 11:<\/label><\/p>\n<ul>\n<li>\n<h4 id=\"you-can-make-surround-the-element-with-a-href-tags-or-you-can-use-jquery-and-use\"><span style=\"color: #000000;\">You can make surround the element with a href tags or you can use jquery and use<\/span><\/h4>\n<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%24(\u201d).click(function(e)%7B%0Ae.preventDefault()%3B%0A%2F%2FDO%20SOMETHING%0A%7D)%3B%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM : We have a block with some fancy visual content that we don\u2019t want to change. we want to make it a clickable link. It something like \u2026 , but that is valid XHTML 1.1. SOLUTION 1: You can\u2019t make the div a link itself, but you can make an tag act as a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[4416,4420,4414,4419,4413,4408,4412,4418,4405,4406,4410,4411,4415,4417,4407,4409],"class_list":["post-2062","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-clickable-div-bootstrap","tag-div-a-css","tag-div-link-html","tag-div-link-yale","tag-how-to-give-link-to-div-tag-in-html","tag-how-to-make-a-div-a-clickable-link-html-css","tag-how-to-make-a-whole-div-clickable","tag-href-to-div-on-same-page","tag-html-how-do-i-make-entire-div-a-link","tag-html-how-do-you-make-a-div-tag-into-a-link","tag-javascript-make-div-into-a-clickable-link","tag-make-a-whole-div-clickable","tag-make-div-clickable-javascript","tag-make-div-clickable-jquery","tag-make-entire-div-clickable","tag-turn-an-entire-div-into-a-clickable-link"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=2062"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2062\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=2062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=2062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=2062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}