2

I made two buttons, but only a part of the buttons is clickable, the whole part of the button should be clickable. I used position absolute to give the buttons a place in my page.

The hml code:

<div class="knop">
<a href="https://mylink"><div class="sideLeft"><image 
src="images/knop.png"></div></a>
</div>
<div class="knop">
<a href="https://mylink"><div class="sideRight"><image 
src="images/knop1.png"></div></a>
</div>

With this css:

.sideLeft{
width: 150px;
height: 150px;
position: absolute;
Top: 41%;
display: block;
}
.sideRight{
width: 150px;
height: 150px;
position: absolute;
Top: 41%;
right: 0px; 
display: block
}
.knop img{
width: 150px;
height: 150px;
}

Image: Image

RaytjeKn
  • 51
  • 1
  • 6
  • isn't that tag instead of ? – Jismon Thomas Jul 06 '18 at 14:53
  • From the code you provided, I could not duplicate your issue. I suspect a conflict with other CSS styling that you haven't provided. Perhaps there's even an (invisible) element that's layered over the buttons, blocking the mouse click event. – Paurian Jul 06 '18 at 14:56

1 Answers1

2

To make sure your button is on the top of other elements add this to it's class:

z-index: 999;

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

This (999) number can be anywhere from 0 to 2147483647 in most browsers.

More about z-index

You should use <img instead of <image.

Tamas Szoke
  • 5,426
  • 4
  • 24
  • 39