CODEWITHSUNDEEP
htmlcss
zumuj
zumuj

Reputation: 62

Browser is overriding all elements in my code and turns them into links

I recently started to learn CSS and HTML and I am doing a front page for exercise. However, the browser is overriding and turning my other elements (in different div) into links. I tried CSS to solve it, nothing worked. I removed all CSS and it still is the same. The container div and all the elements inside it is are now links and when I click, it tries to redirect to hrf.html page.

Can you please tell me where I am doing a mistake?
Elements in container div in the dev tool have this code:

a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Conquer</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
  <div class="nav">
    <div class="nav2">
      <ul class="navlist">
        <li><a href="hrf.html">Homepage</li>
        <li><a href="hrf.html">About Us</li>
        <li><a href="hrf.html">Services</li>
        <li><a href="hrf.html">Contact</li>
        <li><a href="hrf.html">External</li>
      </ul>
    </div>
  </div>

  <div class="container">
    <div class="first-sec">
      <div class="first-img">
        <img src="image1.jpg" alt="image">
      </div>
      <div class="heading">
        <h1>CONQUER</h1>
        <h2>Simple Website Design</h2>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 61

Answers (3)

Usman Ali
Usman Ali

Reputation: 126

you haven't closed the anchor tags inside your "navlist" class.

<li><a href="hrf.html">Homepage</a></li>
<li><a href="hrf.html">About Us</a></li>
<li><a href="hrf.html">Services</a></li>
<li><a href="hrf.html">Contact</a></li>
<li><a href="hrf.html">External</a></li>

try this..

Upvotes: 1

sabeen kanwal
sabeen kanwal

Reputation: 607

it is necessary to close the tags properly otherwise there scope will disturb effects of other tags too..here in your code you forget to close <a> anchor tags thats why its become worry for you..try this 

 <div class="nav">
    <div class="nav2">
    <ul class="navlist">
    <li><a href="hrf.html">Homepage</a></li>
    <li><a href="hrf.html">About Us</a></li>
    <li><a href="hrf.html">Services</a></li>
    <li><a href="hrf.html">Contact</a></li>
    <li><a href="hrf.html">External</a></li>
    </ul>
    </div>
    </div>

Best of luck ahead

Upvotes: 3

Ayush Kumar
Ayush Kumar

Reputation: 954

This is because you haven't closed any <a> tag. You must close it or else you will face same issue.

<li><a href="hrf.html">Homepage</a></li>

Follow this practice in all <li> elements.

That should fix your code. Let me know.

Upvotes: 1

Related Questions