CODEWITHSUNDEEP
htmlcss
Yuvraj Virk
Yuvraj Virk

Reputation: 25

HTML link can't be clicked

A link on a "navbar" on my website can't be clicked for some reason and I can't seem to find the reason why. It is in the viewport(Here is the link to the website:https://codetheworld.000webhostapp.com/. The link on the website is supposed to be the "Learn to code" button). One interesting thing is that, once I open an inspect element window, it works. Here is the code snippet for just the navbar:

#first {
  margin-top: 500px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  top: -1150px;
  left: 100px;
  z-index: 4;
}

li a {
  width: 200px;
  height: 50px;
  font-size: 2em;
  text-decoration: none;
  color: white;
  font-family: Georgia, serif;
  padding: 10px;
  border: 2px solid white;
  border-radius: 7px;
  text-align: center;
  line-height: 30px;
}

li a:hover {
  background-color: grey;
  color: white;
  text-decoration: none;
}
<ul id="first">
  <li><a href="tutorial.html">Learn to code</a></li>
</ul>

Upvotes: 0

Views: 122

Answers (3)

DRP
DRP

Reputation: 289

@Alessi 42 commented the correct solution, however Dekel was the one who posted it.

I did a fiddle and verified certainty: https: // jsfiddle.net / drpeck / tgeyfpd8 /

So learning from the experience I would say:

  1. First test with and without CSS, and once you have determined that without CSS the element appears.
  2. Start introducing CSS selectors and add/removing the different attributes
  3. Once you find the attribute that is affected proceed to play with the values.

For my own sake, although not required, having the absolute path always helps me personally to avoid any unexpected misunderstanding (in other words to have clarity), even if the file is under the root directory. i.e:

Insted of this: href="tutorial.html" I would do href="./tutorial.html"

Upvotes: 0

hardfork
hardfork

Reputation: 3271

Well, you have a <div id="up2"> and it's right over your button. That's the reason why you can't click that button.

You could increase the top value of your div#up2 and edit/decrease the top values of the elements in the div#up2.

Upvotes: 1

Dekel
Dekel

Reputation: 62676

You positioned your element outside of the viewport, so it can't be clicked. Remove the margin-top & top positioning and everything will work:

#first {
    background: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 100px;
  z-index: 4;
}

li a {
  width: 200px;
  height: 50px;
  font-size: 2em;
  text-decoration: none;
  color: white;
  font-family: Georgia, serif;
  padding: 10px;
  border: 2px solid white;
  border-radius: 7px;
  text-align: center;
  line-height: 30px;
}

li a:hover {
  background-color: grey;
  color: white;
  text-decoration: none;
}
<ul id="first">
  <li><a href="tutorial.html">Learn to code</a></li>
</ul>

Upvotes: 2

Related Questions