How to make a div into a link in HTML?

I need to make a complete div tag clickable. Can someone please let me know how to achieve this?

Comments

  • DavidMDavidM USA
    edited February 2014

    Extracted from http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

    The Right Way
    To do this the right way your HTML would look something like this…

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

    And your CSS would look something like this…
    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 */
    }
    

    How it Works
    First off you’re giving the containing div a position (this is very important!). You’re then assining the link inside of the div an absolute position which positions the link relative to the div that is containing it.

    Next, setting the top and left attributes to zero we’re positioning the link in the top left corner of it’s containing div. We then apply a width and height of 100% which makes the link fill the entire containing div. Lastly—and also most importantly—we’re adding a z-index of 10 to the link to make sure that it’s the very top layer and isn’t obstructed or hidden by any other elements. (Technically you could use a value other than 10 as long as there weren’t any other elements in your container with a higher z-index number.)

    Of course leave it to Internet Explorer to give us problems (what else is new?). Older versions of Internet Explorer as it just so happens require such a link to have a background color in order to be clickable (yeah, because that makes sense Microsoft!). That being the case we assigned the link a backfround color of #FFF (white) and we set the opacity to zero. After that we give it an Inernet Explorer only oppacity of 1% (using IE’s proprietary filter property).

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

In this Discussion