Bonjour,

J'ai commencé à créer un site de streaming (purement théorique) et je rencontre un problème d'arborescence dans mon menu qui est géré par PHP avec un require (pour intégrer le menu sur toutes mes pages).

P.S. : Tous les commentaires du menu HTML et du CSS html étaient pour moi, à l'exception de ceux présents sur les deux derniers codes.

Voici l'arborescence de mon site web :

-localhost

     -YouTube

          -ACCUEIL

               *ACCUEIL.php

               *ACCUEIL.css

          -ANIMÉS VF

               -Fairy Tail - vf

                    -Saison 1

                         -Opening 1

                              -Épisode 001

                                   *Fairy Tail Saison 1 Opening 1 Épisode 001.php

                                   *Fairy Tail Saison 1 Opening 1 Épisode 001.css

                              -Épisode 002

                                   *Fairy Tail Saison 1 Opening 1 Épisode 002.php

                                   *Fairy Tail Saison 1 Opening 1 Épisode 002.css

                    *Fairy Tail - vf.php

                    *Fairy Tail - vf.css

                    *Fairy Tail - vf.js

               -One Piece -vf

               *ANIMÉS VF.php

               *ANIMÉS VF.css

          -ANIMÉS VOSTFR

          -fonts

          -Icônes

          -Menu de navigation

                *Menu de navigation.php

[les - représentent les dossiers et les * représentent les fichiers]

J'ai programmé mon menu comme ceci :

HTML

<header id="header">
    <img id="logo" src="#" alt="LOGO #">

    <form method="get" action="#" id="search">
        <input type="search" placeholder="Recherche" name="search_tool" id="search_tool" size="30" maxlenght="25">
    </form>

    <nav id="menu" role="navigation">
        <ul id="horizontal">
            <li id="accueil"><a href="../ACCUEIL/ACCUEIL.html">ACCUEIL</a><li>
            <li id="animes_vf"><a href="../ANIMÉS VF/ANIMÉS VF.html">ANIMÉS VF</a>
                <div class="invisible_animes_vf"></div>
                <ul id="animes_vf_list" class="sous-menu_1">
                    <li id="one_piece_vf"><a href="#">ONE PIECE VF</a></li>
                    <li id="fairy_tail_vf"><a href="../ANIMÉS VF/Fairy Tail - vf/Fairy Tail - vf.php">FAIRY TAIL VF</a></li>
                </ul>
            </li>
            <li id="animes_vostfr"><a href="#">ANIMÉS VOSTFR</a>
                <div class="invisible_animes_vostfr"></div>
                <ul id="animes_vostfr_list" class="sous-menu_1">
                    <li id="one_piece_vostfr"><a href="#">ONE PIECE VOSTFR</a></li>
                    <li id="fairy_tail_vostfr"><a href="#">FAIRY TAIL VOSTFR</a></li>
                </ul>
            </li>
            <li id="connexion_inscription"><a href="#">CONNEXION/INSCRIPTION</a>
                <div class="invisible_connexion_inscription"></div>
                <ul id="connexion_inscription_list" class="sous-menu_1">
                    <li id="connexion"><a href="#">CONNEXION</a></li>
                    <li id="inscription"><a href="#">INSCRIPTION</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

CSS

Normalement tout le code CSS est correct, car il fonctionne très bien.

<style>

        @font-face {
            font-family: "Muli";
            font-weight: 400;
            src: url("../fonts/muli/Muli.ttf") format("truetype");
        }


        @font-face {
            font-family: "Muli-italic";
            font-style: italic;
            src: url("../fonts/muli/Muli-LightItalic.ttf") format(truetype);
        }


        @font-face {
            font-family: "Muli-bold";
            font-weight: bold;
            src: url("../fonts/muli/Muli-Bold.ttf") format(truetype);
        }


        @font-face {
            font-family: "Muli-bold-italic";
            font-weight: bold;
            font-style: italic;
            src: url("../fonts/muli/Muli-BoldItalic.ttf") format(truetype);
        }







        #header {
            padding: 0px;
            margin: 0px;
            height: 70px;
            background-color: #ff54f1;
        }



        #header #logo {
            height: 70px;/*taille par défaut*/
            width: 140px;/*taille par défaut*/
        }



        #header #search {
            display: inline-block;
            padding: 0px;
            margin: 0px;
            width: 270px;
            position: absolute;
            left: 200px;
        }



        #search_tool {
            height: 40px;
            width: 100%;
            margin-top: 15px;
            border-width: 3px;
            border-style: solid;
            border-color: rgb(0, 255, 255);
            border-radius: 20px;
            font-size: 14px;
        }


        #search_tool:focus {
            border-color: rgb(0, 255, 0);
            outline: none;
        }


        #header #nom_du_site, #header #menu {
            display: inline-block;
        }


        #header #menu {
            float: right;
            padding: 0px;
            margin: 0;
        }


        #header #accueil, #header #animes_vf, #header #animes_vostfr, #header #connexion_inscription {
            padding: 0px;
            margin: 0px;
            position: relative;
            bottom: 22.5px;
            height: 64.5px;
        }


        #header #menu #horizontal > li a {
            font-size: 15px; /*auto*/
            line-height: 64.5px;
            padding-top: 27.5px;
            padding-left: 15px;
            padding-bottom: 27.5px;
            padding-right: 15px;
            margin: 0;
        }


        #header #menu #horizontal > li:hover a {
            height: 64.5px;
            padding-top: 0px;/*22.5px*/
            padding-bottom: 0px;/*25.5px*/
        }

        #header #accueil:hover {
            background-color: RGBa(255, 17, 51, 0.4);
            border-top: 5.5px solid #ff1133;
        }


        #header #animes_vf:hover {
            background-color: RGBa(63, 238, 230, 0.4);
            border-top: 5.5px solid #3b8beb;
        }


        #header #animes_vostfr:hover {
            background-color: RGBa(20, 167, 108, 0.35);
            border-top: 5.5px solid #14a76c;
        }


        #header #connexion_inscription:hover {
            background-color: violet;
            border-top: 5.5px solid ;
        }



        #header .sous-menu_1 {
            padding: 0px;
            margin: 0px;
            display: inline-block;
            font-size: 13px;
            width: 200px;
            position: absolute;
            top: 75px;
        }


        #header .sous-menu_1 {
            border-radius: 10px;
        }



        #header #animes_vf .sous-menu_1 li {
            border-bottom: 1.5px solid gray;
        }


        #header #animes_vf .sous-menu_1 #fairy_tail_vf {
            border-bottom: none;
        }



        #header #animes_vf .sous-menu_1 {
            background-color: rgb(59, 139, 235);
        }



        #header #animes_vf .sous-menu_1 a {
            position: relative;
            right: 10px;
        }



        #header #animes_vf .invisible_animes_vf {
            padding-top: 0px;
            padding-bottom: 0px;
            margin: 0px;
            width: 111px;
            height: 10px;
            position: relative;
            bottom: 27.5px;
            background-color: transparent;
        }



        #header #animes_vostfr .invisible_animes_vostfr {
            padding-top: 5px;
            padding-bottom: 5px;
            margin: 0px;
            width: 148.5px;
            position: relative;
            bottom: 27.5px;
            background-color: transparent;
        }



        #header #connexion_inscription .invisible_connexion_inscription {
            padding-top: 5px;
            padding-bottom: 5px;
            margin: 0px;
            width: 217px;
            position: relative;
            bottom: 27.5px;
            background-color: transparent;
        }



        #horizontal {
            /*initialisation*/
            padding: 0;
            margin: 0;
            list-style: none;
            /*text-align: center;*/
        }

        #horizontal li {
            /*liens du menu placés horizontalement*/
            display: inline-block;
        }


        #horizontal .sous-menu_1 li {
            /*liens des sous-menus plus placés comme dans l'élément parent (placés par défaut)*/
            display: inherit;
        }



        #horizontal li a {
            /*mise en forme des liens*/
            display: block;
            text-decoration: none;
            color: white;
        }



        .sous-menu_1 {
            /*menus soient les uns à côté des autres*/
            position: absolute;
            /*pour que les sous-menus soient cachés*/
            clip-path: inset(50%);
            /*pour que les sous-menus n'affectent pas les positions des autres éléments sur la page lorsqu'ils réapparaissent*/
            z-index: 16;
        }


        #horizontal > li:hover .sous-menu_1 {
            /*au survol des li du menu, les sous-menus sont replacés*/
            clip-path: none;
        }





        .invisible_animes_vf, .invisible_animes_vostfr, .invisible_connexion_inscription {
            clip-path: inset(50%);
            z-index: 16;
        }


        #horizontal > li:hover .invisible_animes_vf, #horizontal >li:hover .invisible_animes_vostfr, #horizontal > li:hover .invisible_connexion_inscription {
            clip-path: none;
            position: relative;
            top: 0px;/*il faut 0px*/
        }






        #header #animes_vf .génération a {
            color: whitesmoke;
        }
</style>

Mon problème est que lorsque je suis dans le fichier : "Fairy Tail Saison 1 Opening 1 Épisode 001.php" par exemple, j'essaye d'accéder à ma page d'accueil, le navigateur m'affiche une erreur liée au chemin.

En modifiant le code HTML du menu comme cela :

HTML

<nav id="menu" role="navigation">
        <ul id="horizontal">
            <li id="accueil"><a href="../../../../../ACCUEIL/ACCUEIL.html">ACCUEIL</a><li>//ligne modifiée -> ../../../../../
            <li id="animes_vf"><a href="../ANIMÉS VF/ANIMÉS VF.html">ANIMÉS VF</a>
                <div class="invisible_animes_vf"></div>
                <ul id="animes_vf_list" class="sous-menu_1">
                    <li id="one_piece_vf"><a href="#">ONE PIECE VF</a></li>
                    <li id="fairy_tail_vf"><a href="../ANIMÉS VF/Fairy Tail - vf/Fairy Tail - vf.php">FAIRY TAIL VF</a></li>
                </ul>

le code fonctionne très bien.

Seulement, maintenant si j'essaye d'accéder à l'accueil depuis le fichier : "Fairy Tail - vf.php", le navigateur m'affiche à nouveau une erreur lié au chemin.

Il faudrait que je modifie le code du menu comme cela :

HTML

<nav id="menu" role="navigation">
        <ul id="horizontal">
            <li id="accueil"><a href="../../ACCUEIL/ACCUEIL.html">ACCUEIL</a><li>//ligne modifiée -> ../../

            <li id="animes_vf"><a href="../ANIMÉS VF/ANIMÉS VF.html">ANIMÉS VF</a>
                <div class="invisible_animes_vf"></div>
                <ul id="animes_vf_list" class="sous-menu_1">
                    <li id="one_piece_vf"><a href="#">ONE PIECE VF</a></li>
                    <li id="fairy_tail_vf"><a href="../ANIMÉS VF/Fairy Tail - vf/Fairy Tail - vf.php">FAIRY TAIL VF</a></li>
                </ul>

Et le problème existe pour tous les liens de mon menu.

Je cherche donc un moyen pour qu'à partir de tout niveau dans l'arborescence je puisse accéder aux liens vers lesquels envoient mon menu.

Auriez-vous des idées ?

• Bonjour,

<header id="header">
    <img id="logo" src="#" alt="LOGO #">

    <form method="get" action="#" id="search">
        <input type="search" placeholder="Recherche" name="search_tool" id="search_tool" size="30" maxlenght="25">
    </form>

    <nav id="menu" role="navigation">
        <ul id="horizontal">
            <li id="accueil"><a href="/YouTube/ACCUEIL/ACCUEIL.php">ACCUEIL</a><li>//ligne modifiée -> "/Youtube"
            <li id="animes_vf"><a href="/YouTube/ANIMÉS VF/ANIMÉS VF.php">ANIMÉS VF</a>//ligne modifiée -> "/Youtube"

                <div class="invisible_animes_vf"></div>
                <ul id="animes_vf_list" class="sous-menu_1">
                    <li id="one_piece_vf"><a href="#">ONE PIECE VF</a></li>
                    <li id="fairy_tail_vf"><a href="/YouTube/ANIMÉS VF/Fairy Tail - vf/Fairy Tail - vf.php">FAIRY TAIL VF</a></li>//ligne modifiée -> "/Youtube"

                </ul>
            </li>
            <li id="animes_vostfr"><a href="#">ANIMÉS VOSTFR</a>
                <div class="invisible_animes_vostfr"></div>
                <ul id="animes_vostfr_list" class="sous-menu_1">
                    <li id="one_piece_vostfr"><a href="#">ONE PIECE VOSTFR</a></li>
                    <li id="fairy_tail_vostfr"><a href="#">FAIRY TAIL VOSTFR</a></li>
                </ul>
            </li>
            <li id="connexion_inscription"><a href="#">CONNEXION/INSCRIPTION</a>
                <div class="invisible_connexion_inscription"></div>
                <ul id="connexion_inscription_list" class="sous-menu_1">
                    <li id="connexion"><a href="#">CONNEXION</a></li>
                    <li id="inscription"><a href="#">INSCRIPTION</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>