Having problem with my websites nav bar redirect button-CodePudding

Video: https://youtu.be/aOtayR8LOuc

Essential when I click a button on my nav it will go there but since I have the same nav bar on each page it will try to go to pages/about even if im already there (ex. pages/about/pages/about)

HTML:

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>FFA Website</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <script src="app.js"></script>
        
        <div >
      <a  href="">Home</a>
      <a href="pages/News">News</a>
      <a href="pages/Animals">Animals</a>
      <a href="pages/About">About Me</a>
      <a href="pages/Credits">Credits</a>
    </div>
      </body>
    </html>

CSS:

/* Add a black background color to the top navigation */
        .topnav {
          background-color: #333;
          overflow: hidden;
        }
        
        /* Style the links inside the navigation bar */
        .topnav a {
          float: left;
          color: #f2f2f2;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 17px;
        }
        
        /* Change the color of links on hover */
        .topnav a:hover {
          background-color: #ddd;
          color: black;
        }
        
        /* Add a color to the active/current link */
        .topnav a.active {
          background-color: #04AA6D;
          color: white;
        }

CodePudding user response：

Replace your HTML code like below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>FFA Website</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <script src="app.js"></script>
        <div >
            <a  href="">Home</a>
            <a href="/pages/News">News</a>
            <a href="/pages/Animals">Animals</a>
            <a href="/pages/About">About Me</a>
            <a href="/pages/Credits">Credits</a>
        </div>
    </body>
</html>

CodePudding user response：

this is not working as you expected because you provided false paths since the pages files are in a different folder not the parent so here is what you need to do

for the index.html:

<body>
<script src="app.js"></script>
  <div >
    <a  href="/src/index.html">Home</a>
    <a href="pages/News.html">News</a>
    <a href="pages/Animals.html">Animals</a>
    <a href="pages/About.html">About Me</a>
    <a href="pages/Credits.html">Credits</a>
  </div>
</body>

for any other page inside the pages folder for example News.html:

<body>
    <script src="app.js"></script>
    <div >
        <a  href="../index.html">Home</a>
        <a href="News.html">News</a>
        <a href="Animals.html">Animals</a>
        <a href="About.html">About Me</a>
        <a href="Credits.html">Credits</a>
    </div>
    <h1>News</h1>
</body>

CodePudding user response：

Well there seems no issues with your index.html file except missing the .html extension after each page name, and you just need to fix the redirection in the pages/News , pages/Animals , pages/About, pages/Credits html files, as when you click on any one of them you are no longer in the root of your project instead you are inside pages/ so the redirection changes.

so your other pages(About/Credits/Animals/News) should look like this. make whatever page you wish to make active.

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>FFA Website</title>
        <link rel="stylesheet" href="../style.css">
      </head>
      <body>
        <script src="../app.js"></script>
        
        <div >
      <a  href="">Home</a>
      <a href="News.html">News</a>
      <a href="Animals.html">Animals</a>
      <a href="About.html">About Me</a>
      <a href="Credits.html">Credits</a>
    </div>
      </body>
    </html>

CodePudding user response：

Can you try adding "../" before the path? So <a href="../pages/News">News</a> ... Maybe this works?

CodePudding user response：

Tes dossiers parents sont ils à la bonne place ? L'orthographe est-il bon ?