Howdy, Stranger!

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

Sign In with Facebook Sign In with Google Sign In with OpenID

Categories

We have migrated to a new platform! Please note that you will need to reset your password to log in (your credentials are still in-tact though). Please contact lee@programmersheaven.com if you have questions.
Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

How to make a div into a link in HTML?

Damian99Damian99 USAPosts: 116Member

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

Tagged:

Comments

  • DavidMDavidM USAPosts: 342Member
    edited February 21

    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.