Divs make links on image unclickable

Question

I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.

JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/

Area of issue : <div id="facebook"><a href="http://www.facebook.com"><img src="fb.png" height="101" width="101" /></a>

Answer 1

The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.

There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.

Answer 2

Use z-index:

#twitter {
    position:relative;
    bottom:290px;
    left:168px;
    z-index: 1;
}
#facebook {
    position:relative;
    top:83px;
    right:168px;
    z-index: 5;
}

jsfiddle

However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.

You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.

Answer 3

I'm very sorry to tell you, but the answer is: do a modern HTML tutorial! You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good. But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something. You do the most with this CSS part:

.socialmedia a {
    display: block; /* Because the image is probably higher than the text */
    height: 50px; /* you have to set it to block and height 50px to show the image */
    padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
    padding-top: 12px; /* center in the middle of the image */
    padding-bottom: 12px;
    text-decoration: none;
}

Example g+: CSS:

.g a {
    background: url(logo_g_50x50.png) no-repeat;
}

HTML

<li class="g"><a href="plus.google.com/meeeeee">+1 me on g+</a></li>

and done! It's easier to read and even easier to maintain for later reuse or additions