How to make entire Div section clickable

Community Forums Forums Design Tips and Tricks How to make entire Div section clickable

This topic is: resolved

Tagged: ,

This topic contains 6 replies, has 2 voices, and was last updated by  MM 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #80007

    MM
    Participant
    Post count: 128

    I’m trying to figure out how to make an entire div section clickable, including when on hover

    pls see http://www.hoteliyo.com and scroll down to the 4 boxes. I’ve only managed to get the text clickable

    Is there a way to change the CSS to make the entire box clickable, or some other way in the widget?

    Thks!

    http://hoteliyo.com
    #80025

    chrisrouse
    Member
    Post count: 11

    What are you using to create the boxes?

    #80028

    MM
    Participant
    Post count: 128

    Thks Chris. I’m using css and then a widget section.

    CSS

    #quadbox :hover {
    	background-color: #F2F2F2;
    
    }
    
    #quadbox {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #DDDDDD;
        display: block;
        float: left;
        height: 220px;
        list-style: none outside none;
        margin: 0 1%;
        position: relative;
        text-align: center;
        transition: all 0.1s ease-in-out 0s;
        width: 96%;
    
    }

    And the widget entry:

    <div id="quadbox">
    <center>
    <br>
    <br>
    <center><i class="icon-building icon-4x" style="color:#0274BE;"></i></center>
    <br>
    <a href="http://hoteliyo.com/hotel-assets" style="font-size:20px;font-weight:700;color:#000000;">Hotel Assets</a>
    <br>
    <br>
    <br>
    <br>
    </center>
    </div>
    <br>
    <br>
    #80036

    chrisrouse
    Member
    Post count: 11

    Two options that should work. You can either wrap the entire div in a link, or you can wrap the content of the div in the link. Right now you’re only making the text the link, so you would need to expand that. When I tested it on JSFiddle, I had to remove the height value to make the hover work properly, so you may need to play around with your CSS a little bit more.

    #80046

    MM
    Participant
    Post count: 128

    Cheers Chris. Never seen JSFiddle, interesting.

    Still figuring how to wrap a div in a link or wrap the content….

    #80048

    chrisrouse
    Member
    Post count: 11

    Here you go. You can see where I moved your link to. In this example, I used <div><link>Content</link></div>

    http://jsfiddle.net/56ZA6/

    #80051

    MM
    Participant
    Post count: 128

    Rockstar Chris – that lesson will be very useful. Cheers

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.