Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Dév. Local] Require erreur de l'arborescence

AlixPignard
15 février 2024 à 19:00:26

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,

Je viens de modifier un peu de mon code et il a l'air de fonctionner :

HMTL

<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>

Est-ce une bonne solution ou faut-il que je revoie mon code ?

-
Edité par AlixPignard 16 février 2024 à 7:16:46

  • Partager sur Facebook
  • Partager sur Twitter
zoooooooooobi__
16 février 2024 à 23:34:50

Bonjour,

Tout d'abord, à la vue de ton arborescence je te déconseille d'utiliser un chemin relatif ("../") mais plutôt un chemin absolue tel que "/Youtube", comme tu l'as fais ci-dessus.

En suite je te conseille d'utiliser des super globales PHP dynamique comme :

define('ROOT_PATH', $_SERVER['DOCUMENT_ROOT']); // Récupère le dossier racine du site web


Ensuite, tu peux définir d'autres constantes pour représenter les chemins spécifiques à votre site, par exemple :

define('YOUTUBE', '/YouTube/'); // Variable constante
define('TES-AUTRE-CHEMINS', '/your/path')


Toutes ces constantes peuvent être regroupées dans un fichier de configuration config.php, que vous incluez au début de t'es fichiers PHP :

<?php require_once('chemin/vers/config.php'); ?>

 Voici un peut de doc sur les superglobales, les constantes et les constantes magiques :

Constante magique

Define

SuperGlobal

-
Edité par zoooooooooobi__ 17 février 2024 à 20:08:12

  • Partager sur Facebook
  • Partager sur Twitter
AlixPignard
17 février 2024 à 0:10:40

Bonjour,

Je vous remercie. Je vais regarder cela ce week-end ou en début de semaine prochaine.

  • Partager sur Facebook
  • Partager sur Twitter