1

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.

4

3 に答える 3

4

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>
于 2012-06-14T20:03:27.673 に答える
0

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.

于 2012-06-14T20:00:51.360 に答える
0

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

于 2012-06-14T20:05:47.007 に答える