{"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 &lt;div&gt; block with some fancy visual content that we don&#8217;t want to change. we want to make it a clickable link.<\/li>\n<li>It something like &lt;a href=&#8221;\u2026&#8221;&gt;&lt;div&gt; \u2026 &lt;\/div&gt;&lt;\/a&gt;, 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&#8217;t make the div a link itself, but you can make an &lt;a&gt; tag act as a block, the same behaviour a &lt;div&gt; has.<\/span><\/h4>\n<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">a {<br\/>    display: block;<br\/>}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div onclick=&quot;location.href=&#039;http:\/\/www.example.com&#039;;&quot; \tstyle=&quot;cursor:pointer;&quot;&gt;&lt;\/div&gt;<\/code><\/pre> <\/div>\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 &#8220;valid&#8221; solution to achieving what you want.<\/span><\/h4>\n<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;style type=&quot;text\/css&quot;&gt;<br\/>.myspan {<br\/>    display: block;<br\/>}<br\/>&lt;\/style&gt;<br\/>&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;myspan&quot;&gt;text&lt;\/span&gt;&lt;\/a&gt;<\/code><\/pre> <\/div>\n<p>But most-likely what you really want is to have an &lt;a&gt; 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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div class=&quot;feature&quot;&gt;<br\/>       &lt;a href=&quot;http:\/\/www.example.com&quot;&gt;&lt;\/a&gt;<br\/> &lt;\/div&gt;<\/code><\/pre> <\/div>\n<ul>\n<li>\n<h4 id=\"css\"><span style=\"color: #800080;\"><strong>CSS:<\/strong><\/span><\/h4>\n<\/li>\n<\/ul>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">div.feature {<br\/>        position: relative;    }<br\/>    div.feature a {<br\/>        position: absolute;<br\/>        width: 100%;<br\/>        height: 100%;<br\/>        top: 0;<br\/>        left: 0;<br\/>        text-decoration: none; \/* No underlines on the link *\/<br\/>        z-index: 10; \/* Places the link above everything else in the div *\/<br\/>        background-color: #FFF; \/* Fix to make div clickable in IE *\/<br\/>        opacity: 0; \/* Fix to make div clickable in IE *\/<br\/>        filter: alpha(opacity=1); \/* Fix to make div clickable in IE *\/<br\/>    }<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div onclick=&quot;window.open(&#039;http:\/\/www.brightcherry.co.uk\/&#039;);&quot;&gt;<br\/> &lt;\/div&gt;<\/code><\/pre> <\/div>\n<p style=\"top: 198px;\">[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div onclick=&quot;window.location = &#039;http:\/\/www.brightcherry.co.uk\/&#039;;&quot;&gt;<br\/> &lt;\/div&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">  &lt;div style=&#039;position:relative;background-color:#000000;width:600px;height:30px;border:solid;&#039;&gt;<br\/>    &lt;p style=&#039;display:inline;color:#ffffff;float:left;&#039;&gt;Whatever&lt;\/p&gt;     <br\/>    &lt;a style=&#039;position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;&#039; href =&#039;#&#039;&gt;&lt;\/a&gt;<br\/>  &lt;\/div&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div id=&quot;css_ID&quot;&gt;<br\/>    &lt;a href=&quot;http:\/\/www.your_link.com&quot; style=&quot;display:block; height:100%; width:100%;&quot;&gt;&lt;\/a&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div style=&quot;position: relative; width:191px; height:83px;&quot;&gt;<br\/>    &lt;a href=&quot;link.php&quot; style=&quot;display:block; width:100%; height:100%;&quot;&gt;&lt;\/a&gt;<br\/>&lt;\/div&gt;<\/code><\/pre> <\/div>\n<p style=\"top: 198px;\">[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;div onclick=&quot;location.href=&#039;page.html&#039;;&quot;  style=&quot;cursor:pointer;&quot;&gt;...&lt;\/div&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;div class=&quot;boxdiv&quot; onClick=&quot;window.location.href=&#039;https:\/\/www.google.co.in\/&#039;&quot;&gt;google&lt;\/div&gt;<br\/>&lt;style type=&quot;text\/css&quot;&gt;<br\/>.boxdiv {<br\/>    cursor:pointer;<br\/>    width:200px;<br\/>    height:200px;<br\/>    background-color:#FF0000;<br\/>    color:#fff;<br\/>    text-align:center;<br\/>    font:13px\/17px Arial, Helvetica, sans-serif;<br\/>    }<br\/>&lt;\/style&gt;<\/code><\/pre> <\/div>\n<p style=\"top: 198px;\">[ad type=&#8221;banner&#8221;]\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Css Code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">$(&#039;&#039;).click(function(e){<br\/>e.preventDefault();<br\/>\/\/DO SOMETHING<br\/>});<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM : We have a &lt;div&gt; block with some fancy visual content that we don&#8217;t want to change. we want to make it a clickable link. It something like &lt;a href=&#8221;\u2026&#8221;&gt;&lt;div&gt; \u2026 &lt;\/div&gt;&lt;\/a&gt;, but that is valid XHTML 1.1. SOLUTION 1: You can&#8217;t make the div a link itself, but you can make an &lt;a&gt; [&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}]}}