CODEWITHSUNDEEP
htmlcsshyperlink
jas7457
jas7457

Reputation: 1991

Why is my first image not clickable?

I have a square that contains pictures and each picture is supposed to be clickable to take you to that person's profile, but my top left picture is not clickable. I'm not sure what I'm doing wrong.

Here is my jsfiddle so you can see the problem.

<div id = 'crew_div'>
    <div class = 'my_crew'><div id = 'jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div></div>
    <div class = 'my_crew'><div id = 'dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div></div>
    <div class = 'my_crew'><div id = 'james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div></div>
    <div class = 'my_crew'><div id = 'cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div></div>
</div>

#crew_div {
    position:relative;
    width: 312px;
    height:312px;   
}

.my_crew {
    position:absolute;  
}

.my_crew img {
    width:156px;
    display:block;  
}

.my_crew #jason {
    top:0px;
    left:0px;
    position:relative;
}

.my_crew #dharam {
    top:0px;
    left:156px;
    position:relative;
}

.my_crew #james {
    top: 156px;
    left: 0px;  
    position:relative;
}

.my_crew #cody {
    top:156px;
    left:156px;
    position:relative;
}

Upvotes: 1

Views: 2972

Answers (4)

Patrick Moore
Patrick Moore

Reputation: 13344

You haven't specified width/height dimensions or top/left positioning for your <div class="my_crew">. They are each positioned at the top-left, and their child <div> is then positioned relative to the absolutely positioned parent. That's why the top-left isn't clickable, because it's really stacked under 3 other <div>s.

A better solution would be to combine the two <div>s into one.

See the fiddle here: http://jsfiddle.net/R4HJb/8/

<div id = 'crew_div'>
    <div class = 'my_crew jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div>
            <div class = 'my_crew dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div>
            <div class = 'my_crew james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div>
            <div class = 'my_crew cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div>
</div>

#crew_div {
    position:relative;
    width: 312px;
    height:312px;   
}

.my_crew {
    position:absolute;  
    width: 156px;
    height: 156px;
}

.my_crew img {
    width:156px;
    display:block;  
}

.my_crew.jason {
    top:0px;
    left:0px;
}

.my_crew.dharam {
    top:0px;
    left:156px;
}

.my_crew.james {
    top: 156px;
    left: 0px;  
}

.my_crew.cody {
    top:156px;
    left:156px;
}

Upvotes: 1

Alex L.
Alex L.

Reputation: 821

Add a z-index to your image like this :

.my_crew #jason {
    top:0px;
    left:0px;
    position:relative;
    z-index: 1;
}

Upvotes: 2

opznhaarlems
opznhaarlems

Reputation: 357

Why don't you just float them next to each other? That will also save some lines of CSS.

.my_crew {
    float:left;
}

Example: http://jsfiddle.net/T5LCm/

Upvotes: 1

Mark Tower
Mark Tower

Reputation: 559

Here is what you need, I reorganized your HTML a bit :)

New Fiddle

<div id = 'crew_div'>
<a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><div class = 'my_crew'><div id = 'jason'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></div></div></a>
        <a href = 'http://www.startingtofeelit.com/author/4everevolution/'><div class = 'my_crew'><div id = 'dharam'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></div></div></a>
        <a href='http://www.startingtofeelit.com/author/jjstiles/'><div class = 'my_crew'><div id = 'james'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></div></div></a>
        <a href='http://www.startingtofeelit.com/author/codecray/'><div class = 'my_crew'><div id = 'cody'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></div></div></a>

Upvotes: 1

Related Questions