ansaurus

Question

How to make a whole div be a link to somewhere?

Answer 1

+3 A:

Try replacing your div with an anchor, and making the anchor a block level element.

HTML

<a href="http://awesomecows.com" class="blockLink">Block Link!</a>

CSS

.blockLink{
    display:block;
    padding: 5px;
    text-align: center;
    border: 1px solid black;
    width: 90px;
}

Michael Robinson 2010-08-25 03:57:59

Good idea, but the div actually needs to be a div. It's got an images and some text in it.

Kyle 2010-08-25 04:01:07

Anchors may have images, and even text!

Michael Robinson 2010-08-25 04:01:40

The following tags are valid within the <a> tag:`acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, textarea, tt, u, var`http://webdesign.about.com/od/htmltags/p/bltags_a.htm

Michael Robinson 2010-08-25 04:05:15

It's got some other divs in it too, I guess I could just make the inner divs block styled spans, but for some reason that doesn't feel right to me. Would it be that bad if I just wrapped an anchor around the div?

Kyle 2010-08-25 04:07:18

A div is really a "non-tag"-- it has no intrinsic behavior besides being block level. What that means is that if you can do something with a div, you can probably do it with an a tag.

ndp 2010-08-25 04:09:54

If you want the whole `block` to be a link, and be accessible by people who don't use Javascript / use screen readers, then make it an anchor. If you don't care about them, use Javascript. Wrapping an anchor around a div may have strange repercussions, depending on the browser - it'd be best not to do that. IMHO you should make them block spans, I'm not sure if that's the best solution but I've done it before...

Michael Robinson 2010-08-25 04:10:31

@sam, if you need to use a div, use a div. what you could also do is inside the div, make an anchor that is the same size as the div and make it `display: block` like this answer says.

Jason 2010-08-25 17:10:04

Answer 2

+1 A:

I know you're saying you're just using javascript, but this is very easily done if you use jQuery:

$('#mydiv').click(function(){
    window.location.href = [your url here];
});

As for the status bar, it won't show where it's going if you use this method. Of course you could put the URL in the title attribute of the div if you want...

Jason 2010-08-25 03:59:18

Yea, I am using Jquery, and that code is pretty much what I have, but the problem is that the status bar doesn't show the destination URL so the user wouldn't know what page they will go to when they click. Not that big of a deal, but if I can get the status bar working too that would be good.

Kyle 2010-08-25 04:02:39

add function to the listern for the click envent to inject the text and you're done...

James Fleming 2010-08-25 04:07:57

ansaurus

tags:

views:

answers:

How to make a whole div be a link to somewhere?

related questions