Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mes élément a apparaissent dans mon side menu

Sujet résolu
ThomasBLANC28
    6 décembre 2021 à 16:00:19

    Comme vous pouvez le voir, mon menu (side menu) à gauche de l'écran, se déplie vers la droite quand on passe la souris dessus (":hover"). Sauf que je ne comprends pas pourquoi est-ce que mes balises "a" apparaissent DANS le menu quand on passe la souris dessus

    Le code HTML de la page concernée :

    <!DOCTYPE html>
<html style="margin: 0px; padding: 0px">
<title>Bienvenue | Thomavion</title>
<link rel="icon" type="image/png" sizes="16x16" href="https://[censored]-99fd-404d-a58a-e73594e2d6c4%2FT.png?v=1637830231326">
<link type="text/css" rel="stylesheet" href="https://[censored]/css/scrollbar.css">
<link type="text/css" rel="stylesheet" href="https://[censored]/css/button.css">
<link type="text/css" rel="stylesheet" href="https://[censored]/css/main.css">
<link type="text/css" rel="stylesheet" href="https://[censored]/css/a.css">

</head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script> 
    $(function(){
      $("#inclusion").load("nav.php"); 
    });
    </script>
</head>  

<body>
  <div id="inclusion"></div>
<main class="main-content">
<center><br>
  <a href="https://[censored]/" class="lvl1 lvl2"><img src="https://[censored]d46-99fd-404d-a58a-e73594e2d6c4%2F[censored].png?v=1637829803224"></a>
    <p>Où souhaites-tu aller ?</p><br><br>
    <h2>Jeux :</h2>
    <p>[censored]Clique
        <a href="./games/index.html" class="lvl1 lvl2">ici</a> !
    </p><br>

    <h2>Jeux moddés :</h2>
    <p>[censored] Clique
        <a href="./games/index-modded.html" class="lvl1 lvl2">ici</a> !
    </p><br>

    <h2>Musiques :</h2>
    <p>[censored] ? Clique
        <a href="https://[censored]/" class="lvl1 lvl2">ici</a> !
    </p><br>

    <h2>Films :</h2>
    <p>Tu cherches des films à voir et à revoir ? Clique
        <a href="./films/index.html" class="lvl1 lvl2">ici</a> !
    </p><br><br><br><br>

    <div class="padlet-embed">
        <p style="padding:0;margin:0"><iframe src="https://[censored]0ib3lnbkolhw4f" frameborder="0" allow="camera;microphone;geolocation" style="width:100%;height:850px;display:block;padding:0;margin:0"></iframe></p>
    </div><br><br><br><br>
    <a width="100%" href="./egg.html" style="color: #202020; float: left">easteregg.exe</a><br>
</center>
<a style="float: right; font-size: 65%" href="https://[censored]/mentions-legales.html" class="lvl1 lvl2">© 2021 - Un Thomas Sauvage !!#1309</a>
</main>
</body>

</html>

    Le code PHP du menu :

    <!DOCTYPE html>
<html>
<link type="text/css" rel="stylesheet" href="https://[censored]/css/scrollbar.css">
<link type="text/css" rel="stylesheet" href="https://[censored]/css/button.css">
<link type="text/css" rel="stylesheet" href="https://[censored]/css/main.css">
<link type="text/css" rel="stylesheet" href="https://[censored]/css/a.css">
<head>
  <meta charset="utf-8">
</head>
    <nav class="side-nav">
      <div class="wrapper">
        <div onclick="window.location.href='https://[censored]/games/index.html'" class="nav-bloc n-1">
          <img src="https://[censored]46-99fd-404d-a58a-e73594e2d6c4%2Flogo%20-%20jeux.png?v=1638380999580" height="50">
          <div class="sub-nav">
            <h2txt><ahref href="https://[censored]/index.html">Jeux</ahref></h2txt>
            <ul>
              <li>
                <a href="https://[censored]/games/informations/among-trees.html">Among Trees</a>
              </li>
              <!--<li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>-->
            </ul>
          </div>
        </div>

        <div onclick="window.location.href='https://[censored]/games/index-modded.html'" class="nav-bloc n-2">
          <img src="https:/[censored]99fd-404d-a58a-e73594e2d6c4%2Flogo%20-%20jeux%20moddes.png?v=1638380999491" height="50">
          <div class="sub-nav">
            <h2txt><ahref href="https://[censored]s/index-modded.html">Jeux moddés</ahref></h2txt>
            <ul>
              <!--<li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>-->
            </ul>
          </div>
        </div>

        <div onclick="window.location.href='ht[censored]litch.me'" class="nav-bloc n-3">
          <img src="https://c[censored]76c0d46-99fd-404d-a58a-e73594e2d6c4%2Flogo%20-%20musiques.png?v=1638380687572" height="49">
          <div class="sub-nav">
            <h2txt><ahref href="https://[censored].me">Musiques</ahref></h2txt>
            <ul>
              <!-- https://fr.wikipedia.org/wiki/Liste_de_styles_musicaux
              <li>
                <a>Acid Blues</a>
              </li>
              <li>
                <a>Acid breaks</a>
              </li>
              <li>
                <a>Acid house</a>
              </li>
              <li>
                <a>Acid jazz</a>
              </li>
              <li>
                <a>Acid rock</a>
              </li>
              <li>
                <a>Acid techno</a>
              </li>
              <li>
                <a>Acid trance</a>
              </li>
              <li>
                <a>Acidcore</a>
              </li>
              <li>
                <a>Adult contemporary</a>
              </li>
              <li>
                <a>Afrobeat</a>
              </li>
              <li>
                <a>Afropop</a>
              </li>
              <li>
                <a>Afrotrap</a>
              </li>
              <li>
                <a>Aguinaldo</a>
              </li>
              <li>
                <a>Allaoui</a>
              </li>
              <li>
                <a>Ambient</a>
              </li>
              <li>
                <a>Ambient house</a>
              </li>
              <li>
                <a>Ambient jungle</a>
              </li>
              <li>
                <a>Ambient techno</a>
              </li>
              <li>
                <a>Americana</a>
              </li>
              <li>
                <a>Anarcho-punk</a>
              </li>
              <li>
                <a>Anti-folk</a>
              </li>
              <li>
                <a>Apala</a>
              </li>
              <li>
                <a>Arena Rock</a>
              </li>


-->
              
              <li>
                <a href="https://m[censored]index_rapfr.html">Rap Français</a>
              </li>
              <li>
                <a href="https://[censored]HR.html">Métal / Hard-Rock</a>
              </li>
              <!--<li>
                <a>Rock</a>
              </li>
              <li>
                <a>Hip Hop</a>
              </li>
              <li>
                <a>Electro</a>
              </li>
              <li>
                <a>Blues</a>
              </li>
              <li>
                <a>Blues</a>
              </li>
              <li>
                <a>Blues</a>
              </li>-->
            </ul>
          </div>
        </div>

        <div onclick="window.location.href='https://t[censored]h.me/films/index.html'" class="nav-bloc n-5">
          <img src="https://c[censored]6-99fd-404d-a58a-e73594e2d6c4%2Flogo%20-%20films.png?v=1638380278197" height="51">
          <div class="sub-nav">
            <h2txt><ahref href="https://t[censored].html">Films et séries</ahref></h2txt>
            <ul>
              <!--<li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>-->
            </ul>
          </div>
        </div>
        <div onclick="window.location.href='http[censored]ch.me/films/anime/index.html'" class="nav-bloc n-5">
          <img src="https://c[censored]0d46-99fd-404d-a58a-e73594e2d6c4%2Flogo%20-%20anime.png?v=1638380833978" height="50px">
          <div class="sub-nav">
            <h2txt><ahref href="https:/[censored]s/anime/index.html">Animes</ahref></h2txt>
            <ul>
              <li>
                <a href="https:[censored]ilms/anime/one-piece/one-piece.html">One Piece</a>
              </li>
              <!--<li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>
              <li>
                <a>Link</a>
              </li>-->
            </ul>
          </div>
        </div>
      </div>
    </nav>
</html>

    Le code CSS du site :

    .lvl1 {
  align-self: center;
  background: transparent;
  border-radius: 0.25rem;
  color: inherit;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  line-height: 100%;
  padding: 1rem 1rem;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.lvl1:hover {
  background: #90909025;
  border-color: #90909025;
  color: #161616;
}

.lvl1.lvl2 {
  background: transparent;
  border: none;
  font-weight: 400;
  line-height: unset;
  outline: none;
  padding: 0;
  position: relative;
  text-transform: none;
  /*z-index: -1;*/
}

@media (min-width: 0px) {
  .lvl1.lvl2 {
    transition: all 0.2s ease;
  }
  .lvl1.lvl2:before {
    background: #202020;
    border-radius: 0.25rem;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: -0.1rem;
    position: absolute;
    transition: all 0.2s ease;
    width: calc(100% + 0.2rem);
    /*z-index: -1;*/
  }
  .lvl1.lvl2:hover {
    color: #d5d5d5;
  }
  .lvl1.lvl2:hover:before {
    height: 50%;
    left: -0.25rem;
    width: calc(50% + 0.5rem);
  }
}

.lvl1.lvl2 img {
  display: block;
}

@media (min-width: 0px) {
  .lvl1.lvl2:before {
    background: #909090;
    height: 4px;
  }
  .lvl1.lvl2:hover:before {
    height: 100%;
    left: -0.2rem;
    width: calc(100% + 0.4rem);
    background: #90909025;
  }
}

.lvl1[disabled] {
  opacity: 0.5;
}

/* Body - DO NOT TOUCH THIS */

button {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding: 7px 10%;
  margin: 2px;
  background-color: white;
  color: black;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  border: 1px solid;
  -webkit-border-radius: 11px;
  -moz-border-radius: 11px;
  border-radius: 5px;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
  
button:hover{
  /* Quand on passe la souris sur le bouton*/
  background-color: #404040;
  color: white;
  text-shadow: 0.2em 0.2em 0.1em black
}

download {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding: 7px 10%;
  margin: 2px;
  background-color: white;
  color: black;
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  border: 1px solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

download:hover {
    /* Quand on passe la souris sur le bouton*/
  background-color: #404040;
  color: white;
  text-shadow: 0.2em 0.2em 0.1em black
}

/* Body - DO NOT TOUCH THIS */

body{
  background-color: #202020;
}

@font-face {
  font-family: LemonMilk;
  src: url(https://[censored]6c0d46-99fd-404d-a58a-e73594e2d6c4%2FLemonMilkLight-owxMq.ttf?v=1636922218798);
}

video,
#ytb {
  border-radius: 15px;
}

img {
  border-radius: 5px;
}

a {
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #D9D9D9;
}
  
a:hover {
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  color: #6B6B6B;
}

ahref {
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: white;
}

ahref:hover {
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  color: #6B6B6B;
}

p {
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: white
}

h1,
h2,
h3,
h4,
h5 {
  text-align: center;
  color: white;
  font-family: LemonMilk;
}


/* Tableaux */

#normal table,
#normal th,
#normal td {
  border: 3px solid #808080;
  border-collapse: collapse;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  text-align: center;
  color: white;
}
    
#normal tr {
  color: white;
}

#among-trees table,
#among-trees th,
#among-trees td {
  background-color: #5154a1;
  border-collapse: collapse;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  text-align: center;
}


/* Navigation - DO NOT TOUCH THIS OR IT WILL CHANGE ALL THE WEBSITE */

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* New Stacking Context with Fixed */
.side-nav {
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
}

/* To hide the sub-nav */
.wrapper {
  background: #333;
  height: 100vh;
  width: 75px;
}

.nav-bloc {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f21e;
}
.nav-bloc:hover {
  background: rgb(24, 24, 24);
}
.nav-bloc:hover .sub-nav {
  transform: translateX(75px);
}
.sub-nav {
  padding: 0px;
  width: 1005px;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #333;
  z-index: -1;
  color: white;
  /* Hidden at the left side */
  transform: translateX(-100%);
  transition: transform 0.2s ease-in-out;
  border-right: 2px solid #000;
  border-left: 2px solid #000;
  overflow: scroll;
}
.sub-nav h2txt {
  font-family: open sans, sans-serif;
  height: 60px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
}
.sub-nav ul {
  list-style-type: none;
}
.sub-nav li {
  width: 150px;
  padding: 15px 20px;
  float: left;
}
.sub-nav li:hover {
  background: rgba(160, 160, 160, 0.555);
}
.sub-nav li a {
   color: #f2f2f2;
   text-decoration: none;
}


.main-content {
  padding-left: 80px;
  color: #f3f3f3;
}
.main-content h1 {
  font-family: Open Sans, sans-serif;
  text-align: center;
  margin: 30px 0;
  font-size: 40px;
}

.main-content p {
  max-width: 10000px;
  margin: 0 auto;
  padding: 0 30px;
  line-height: 1.7;
}

/* Body - DO NOT TOUCH THIS */

::-webkit-scrollbar {
  /* Scrollbars */
  width: 14px;
  height: 14px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  /* Barre */
  border: solid 0 transparent;
  border-right-width: 4px;
  -webkit-border-radius: 5px;
  -webkit-border-top-right-radius: 9px 5px;
  -webkit-border-bottom-right-radius: 9px 5px;
  -webkit-box-shadow: inset 0 0 0 1px rgb(79, 79, 79), inset 0 0 0 6px rgb(102, 102, 102);
}

::-webkit-scrollbar-thumb:hover {
  /* Barre */
  -webkit-box-shadow: inset 0 0 0 1px rgb(90, 90, 90), inset 0 0 0 6px rgb(110, 110, 110);
}

::-webkit-scrollbar-thumb:horizontal {
  /* Barre du bas */
  border-right-width: 0;
  border-bottom-width: 4px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px 9px;
  -webkit-border-bottom-left-radius: 5px 9px;
}

::-webkit-scrollbar-corner {
  /* Coin de la fenêtre */
  background: transparent;
}

::-webkit-scrollbar-button {
  /* Bouton pour descendre */
  background-position: -19px 50%;
}

::-webkit-scrollbar-button:increment {
  /* Bouton pour descendre */
  background-position: -19px 50%;
}

::-webkit-scrollbar-button:horizontal {
  /* Boutons horizontaux */
  width: 26px;
  background: url(images/webkit-arrows-horiz.png) 50% 1px no-repeat, #bfb6a3 url(images/bg-blog-repeat.png) 0 0 no-repeat;
}

::-webkit-scrollbar-button:horizontal:increment {
  /* Bouton pour aller à droite */
  background-position: 50% -19px;
}

    Si vous trouvez pourquoi est-ce que ça marche pas, je suis très preneur ;-;

    • Partager sur Facebook
    • Partager sur Twitter
    AbcAbc6
      6 décembre 2021 à 16:55:12

      Bonjour, passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

      Vous avez deux balises de fermeture du <head> et la balise <link> doit  être dans le head pas en dehors. Idem pour <title>

      La balise <img> ne sort jamais sans son attribut alt obligatoire.

      Dans le deuxième code pas de balise <body>?

      La balise <br> est un retour ligne, elle est à placer dans une portion de texte, elle ne sert en aucun cas à réaliser des espacements entre éléments pour ce faire il existe les padding ou margin en CSS. Plusieurs <br> à la suite n'ont aucun sens du point de vue sémantique.

      • Partager sur Facebook
      • Partager sur Twitter

      Mes élément a apparaissent dans mon side menu

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur ●
      • Markdown