when a container needs to be a clickable link

I'm not quite sure the best way to deal with this situation. Here's a hypothetical situation:

<a href="/my-page/">
    <div style="width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative;">
        <div style="line-height: 50px; position: absolute; bottom: 0; left: 0;">
            <span>My Clickable Box</span>
        </div>
    </div>
</a>

So in this situation, I have a container with another container positioned at the bottom for the actual text...but I need the entire box to be clickable.

As we all know, an anchor tag does not do well when you tell it to be a specific height or width...so you pretty much rely on the inner content to do so.

I don't know, I'm at a bit of a loss on this one.

Answers


If you change its display to block or inline-block you can size it, no need to use divs inside which I'm pretty sure is invalid.

<a style="display:inline-block;width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative;" href="/my-page/">
    <span>My Clickable Box</span>
</a>

You can place the div that needs to be clickable inside the anchor tag, and set the size on the div. The whole div will then be clickable as it lives inside the link.


You can style the anchor just like you would the divs, and then the entire area is clickable. E.g.

<a href="/my-page/" style="width: 150px; height: 150px; background-image: url('images/myimage.jpg') 0 0 no-repeat; position: relative; line-height: 50px; position: absolute; bottom: 0; left: 0;">My Clickable Box


Need Your Help

Accent characters like à,É are not working with google chrome + silverlight 4

firefox google-chrome silverlight-4.0 telerik

Accent characters like à,É are not working with Google chrome &amp; Firefox in Silverlight 4 application.

Regarding collection framework

java collections hashmap hashtable hashset

I have some questions about Java Collection objects...