CODEWITHSUNDEEP
htmlcss
crazybob
crazybob

Reputation: 2317

Image link cause another image link to be unclickable

I have two image links that need to be centered with a little shifting. My problem is that one link cause the other to be unclickable.

DEMO - The right one can't be clicked

HTML:

<div class="my_class" id="my_id1">
    <a href="URL">
        <img  src="//placehold.it/200x150" />
    </a>
</div>
<div class="my_class" id="my_id2">
    <a href="URL2">
        <img  src="//placehold.it/200x150" />
    </a>
</div>

css:

#my_id1
{
    left: 120px;
}
#my_id2
{
    right: 120px;
    top: -157px;   
}
.my_class
{
  text-align:center;
  position:relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.my_class
{
  text-align:center;
  position:relative;
  display: block;
  margin: 0px, auto;
}
img{
    border:1px solid red;
}

Upvotes: 2

Views: 68

Answers (5)

Beniamin Szabo
Beniamin Szabo

Reputation: 1929

Here is the modified code: 

<div class="my_class" id="my_id1"> <a href="URL">
    <img  src="//placehold.it/200x150" />
</a>

</div>
<div class="my_class" id="my_id2"> <a href="URL2">
    <img  src="//placehold.it/200x150" />
</a>

</div>

And the CSS:

#my_id1 {
  float: left;
  left: 150px;
}
#my_id2 {
  float:right;
  right: 150px;
}
.my_class {
  text-align:center;
  position:relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.my_class {
  text-align:center;
  position:relative;
  display: block;
  margin: 0px, auto;
}
img {
  border:1px solid red;
}

Upvotes: 3

user5623896726
user5623896726

Reputation: 136

Try not to use negative positioning, it's bad practice and will cause issues such as this. Try defining the size of the containing divide, position that, then float the divs within this.

I'll put together a quick fiddle to show you.

http://jsfiddle.net/GbzSQ/23/

And here's the HTML:

<div class="container" id="container">
<div class="my_class1" id="my_id1">
<a href="URL">
    <img  src="//placehold.it/200x150" alt="1" />
</a>
</div>
<div class="my_class2" id="my_id2">
<a href="URL2">
    <img  src="//placehold.it/200x150" alt="2" />
</a>
</div>
</div>

And the CSS:

.my_class2 {
text-align:center;
float: right;
position:relative;
display: block;
margin: 0 auto;
}
.my_class1 {
text-align:center;
float: left;
position:relative;
display: block;
margin: 0 auto;
margin-right: 20px;
}
img{
border:1px solid red;
}
.container {
width: 440px;
height: 200px;
display: block;
margin: 0 auto;
}

Upvotes: 0

chris
chris

Reputation: 4867

I would use some floats or display:inline-block 's.

I made an update of your Fiddle with the Floats.

http://jsfiddle.net/cfknoop/GbzSQ/7/

#my_id1 {
    float:left;
}
#my_id2 {
     float:right; 
}

The wrapper needs to be cleared with an clearfix or something.

Upvotes: 0

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

You need to float those containers : http://jsfiddle.net/GbzSQ/5/ Your first div overlaps over the other, so you need to float them and then use margins to position them properly.

.my_class{
    float:left;
    width:200px;
}

Upvotes: 1

Palin Revno
Palin Revno

Reputation: 586

The divs of the links are just on top of each other. So the mouse does not "see the bottom link". Try using display inline in the divs with defined width.

Upvotes: 0

Related Questions