CODEWITHSUNDEEP
htmlcsshyperlink
paldepind
paldepind

Reputation: 4870

Only text in link box is clickable

On a webpage I've got a list of thumbnails with link boxes on top of them. The are wrapped by a link tag and are clickable. However, in the link boxes on top of them which has a slightly transparent background it is only the text and not the entire box which is clickable.

This is the HTML code for one set of thumbnail and link box:

<article class="recent-post-item">
    <h2>
        <a  href="link/to/somewhere" title="Permanent link to Something">Something</a>
    </h2>
    <a href="link/to/somewhere" title="Something" class="thumb">
        <img src="someimage.png" alt="Something" width="248" height="125" />
    </a>
</article>

And this is the corresponding stylesheet:

#column-2 .recent-post-item {
    height: 127px;
    width: 250px;
    position: relative;
    border: none;
}
#column-2 .thumb {
    margin: 0;
    position: absolute;
    top: 0px;
    left: 0px;
}
#column-2 h2 {
    font-size: 22px;
    background-color:rgba(255,255,255,0.6);
    padding: 5px 4px;
    margin: 0;
    position: absolute;
    z-index: 1;
    bottom: 1px;
    left: 1px;
    right: 1px;
}

And heres a working site showing the problem: http://fuckthepony.dk/wordpress/ (the thumbnails I'm talking about are those in the middle column)

Some people have told me that they do not experience the problem. I've tested on Linux with both Opera, Chrome and Firefox and the problem is persistent across all of these browsers.

Upvotes: 0

Views: 5050

Answers (3)

zessx
zessx

Reputation: 68790

That's just because the a element has not display:block by default.

Just add this little line :

#column-2 h2 a { display:block; }

Upvotes: 1

Dave Haigh
Dave Haigh

Reputation: 4547

I concur with the comments above but to make the whole transparent block clickable you would need to also take the padding off of the h2 and add the padding to the a tag instead.

#column-2 h2 {
    padding: 0;
}

#column-2 h2 a {
    display: block;
    padding: 5px 4px;
}

Upvotes: 2

rdleal
rdleal

Reputation: 1032

This is because a elements are inline elements, so they don't take all parent's width available. You can add this rule to your css: 

#column-2 h2 a {
    display: block;
}

Upvotes: 2

Related Questions