div hover links

Ok, im trying to make the div boxes on

funzac.com

all linked, at the moment only the title and iamge are linked, how cna i do it so where ever in the box you click it links to next page.

 

Couldn't you make the whole div a link?

 

thats what im tryin to do but you can't have

<a href =""> <div> </div> </a> because its not valid

I need something in the css like display:block i tihnk

 

It's going to require some CSS trickery, but yeah, you can do it.

Let's say you have a DIV containing a link.

<div id="linkMe">
    <a href="#">Link Text</a>
</div>

Code (markup):

Starting with the DIV element with the ID of "linkMe" you're going to want to set a width and height for the DIV, and also remove the margin and padding from it as well:

#linkMe {
    height: 150px;
    margin: 0;
    padding: 0;
    width: 200px;
}

Code (markup):

And then for your link itself, turn it into a block-level element, give it a height and width equal to the DIV, position it relative to its location and slap a z-index on top of it.

#linkMe a {
    display: block;
    height: 150px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 200px;
    z-index: 1;
}

Code (markup):

How well does that work for you? Bear in mind I didn't look at your site (this was done from memory - the relative positioning and z-index are to cure a depth sorting problem IE likes to have from time to time)