CODEWITHSUNDEEP
htmlcssimagehyperlinkanchor
user3416331
user3416331

Reputation: 35

Images with anchor tag not acting like a link

I have a simple portfolio which has a grid of images which will eventually be work. I want the images to link to another page with more information about each project when clicked.

For some reason the anchor tags are not acting like links, and you cannot click them.

.work {
width: 100%;
margin-top: 50px; }

Here is a JS Fiddle - http://jsfiddle.net/tomwalshx/3msa75a6/

Upvotes: 1

Views: 1494

Answers (2)

aurel
aurel

Reputation: 3132

Your only issue is in HTML you use non-existing elements, for example

<div class="container">
       <img src="http://walshx.com/portfolio/img/logo.png" id="logo">
 </container>

That </container> should clearly be </div>. You do that with footer as well.

After I corrected your HTML, I didn't need to touch css for it to work the way you wanted to http://jsfiddle.net/3msa75a6/7/

Upvotes: 0

powerbuoy
powerbuoy

Reputation: 12848

It's because the images are floated inside the links, rendering the links 0x0 in size. Instead float the links themselves (and add display: block;): http://jsfiddle.net/3msa75a6/1/ (I also added overflow: hidden; to .work as a "clearfix" + removed media queries you may want to add back)

.work a {
    display: block;
    float: left;
    max-width: 25%;
}

.work img {
    display: block;
    max-width: 100%;
}

Edit: The display: block; on the images are so that line-height etc is ignored (try without and you'll see some spacing)

Upvotes: 2

Related Questions