CSS • HTML

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

March 24, 2017
2 Min Read

  • 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.

  • 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.

Css Code 
a {
    display: block;
}

You can then set the width and height on it.

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

Html Code 
<div onclick="location.href='http://www.example.com';" 	style="cursor:pointer;"></div>

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

Html Code 
<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

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

  • HTML:

Html code 
<div class="feature">
       <a href="http://www.example.com"></a>
 </div>

  • CSS:

Css Code 
div.feature {
        position: relative;    }
    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

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.
Html code 
<div onclick="window.open('http://www.brightcherry.co.uk/');">
 </div>

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.
Html Code 
<div onclick="window.location = 'http://www.brightcherry.co.uk/';">
 </div>

  • The code :

Html Code 
  <div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
    <p style='display:inline;color:#ffffff;float:left;'>Whatever</p>     
    <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
  </div>

  • You could also try by wrapping an anchor, then turning its height and width to be the same with its parent.
Html Code 
<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

  • This is one of the solution :

Html Code 
<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

  • Try this code :

Html Code 
<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

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

Css Code 
<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

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

Css Code 
$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});
READ  [Solved -10 Answers] What is the best way to conditionally apply a class
Tags

About the author

View All Posts
author

author

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

X