CODEWITHSUNDEEP
htmlcss
Johannes Zeiser
Johannes Zeiser

Reputation: 1

HTML Links are not clickable, seem overlayed

I have a quite simple website. It scans for pictures via php and then displays them one at a time with two buttons on top. The bottons are used to switch back and forth between them. On the very top of the page there are a couple of links, but I can not click them. When I double klick them, the picture gets highlighted instead of the text my cursor is above. I have tried it without js and php and the issue is still there.

I am not very experienced in HTML. I think it might be something about the z-index, but I cannot fix it.

body {
  background-color: #FFFFFFf
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #fffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  width: 100%;
  padding-top: 200px;
}

.container .btnF {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
<div class="menup1"><a href="google.com">Vorspeise</a></div>
<div class="menup1"><a href="../../../Suppen">Suppen</a></div>
<div class="menup1"><a href="../../../Dessert">Dessert</a></div>
<div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
<div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
<div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
<div class="container">
  <img id="rezept" src="1.jpg" height=auto width=100%/>
  <button class="btnF" id="btnF">+</button>
  <button class="btnB" id="btnB">-</button>
</div>

I hope you can help me out here. I could manage to work out all the js and php things involved, but languages that don't follow programming rules... Not my best part.

Upvotes: 0

Views: 111

Answers (2)

OrderAndChaos
OrderAndChaos

Reputation: 3860

The reason you have the box over the links is the floats aren't being cleared. That means the box that contains the links collapses, which is probably why you need to add so much padding. If you add clear: both to the container you will be able to click the links.

If you want to keep everything else the same I suggest adding a wrapper around the menu and setting position: relative, then you can give that a z-index greater than the container.

The menu buttons which are both position: absolute then need higher z-index too.

.menu {
  position: relative;
  z-index: 2;
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #fffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 200px;
}

.container .btnF {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
  <div class="menu">
    <div class="menup1"><a href="google.com">Vorspeise</a></div>
    <div class="menup1"><a href="../../../Suppen">Suppen</a></div>
    <div class="menup1"><a href="../../../Dessert">Dessert</a></div>
    <div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
    <div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
    <div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
  </div>
  <div class="container">
    <img id="rezept" src="1.jpg" height=auto width=100%/>
    <button class="btnF" id="btnF">+</button>
    <button class="btnB" id="btnB">-</button>
  </div>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

The problem isn't with z-index, but rather that your container is overlapping your menu items. To correct this, replace padding-top: 200px with margin-top: 200px, and give the container float: left. Alternatively, if you don't want to add any 'offset' with your container, you can clear the float before initialising it with clear: left on the container.

Also note that both your body and .menup1 have invalid background-colours; when specifying hex codes, you must either specify three, four or six letters/digits. Five is invalid.

Both of these have been fixed in the following:

body {
  background-color: #ffffff;
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #ffffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  float: left;
  width: 100%;
  margin-top: 200px;
}

.container .btnF {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}
<div class="menup1"><a href="google.com">Vorspeise</a></div>
<div class="menup1"><a href="../../../Suppen">Suppen</a></div>
<div class="menup1"><a href="../../../Dessert">Dessert</a></div>
<div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
<div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
<div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
<div class="container">
  <img id="rezept" src="1.jpg" height=auto width=100%/>
  <button class="btnF" id="btnF">+</button>
  <button class="btnB" id="btnB">-</button>
</div>

Upvotes: 0

Related Questions