[ Solved - 11 Answers ] CSS - HTML - Make a div into a link-Learn in 30 Sec from Microsoft Awarded MVP

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.

Css Code

a {
    display: block;
}

You can then set the width and height on it.

SOLUTION 2:

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

Html Code

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

SOLUTION 3:

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.

SOLUTION 4:

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 */
    }

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.

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>

SOLUTION 6:

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>

SOLUTION 7:

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>

SOLUTION 8:

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>

SOLUTION 9:

Try this code :

Html Code

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

SOLUTION 10:

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>

SOLUTION 11:

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
});

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

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.

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

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

HTML:

CSS:

Open in new window :

Open in same window :

The code :

This is one of the solution :

Try this code :

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

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

About the author

author

Add Comment

Cancel reply

OTHER LANGUAGES

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.

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

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

HTML:

CSS:

Open in new window :

Open in same window :

The code :

This is one of the solution :

Try this code :

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

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

You may also like

How do I start learning HTML for Beginners?

C Programming – Vertex Cover Problem | Set 1 (Introduction and Approximate Algorithm)

[Solved – 10 Answers] JAVASCRIPT -HTML – How to get current URL in JavaScript

About the author

author

Add Comment

Cancel reply

OTHER LANGUAGES