Php/javascript/html : Problème HTML/CSS
EN DIRECT en ligne connexion / inscription
Connexion

Surnom/Pseudo
Mot de Passe :

[ Vous avez perdu votre mot de pass ? | Devenir membre ]

×

Problème HTML/CSS

CowcotLand topic RSS feed Surveiller les réponses de ce sujet
TheBestOfTheWorst @
Ouvrier agricole
Ouvrier agricole

411pts

Inscrit le: 08 février 2021
Messages: 147

Navigateur : n.c.

En ligne
Message Posté le: 16 avril 2021 à 13:21  Lien permanent
Répondre en citant
Bonjour,

Ca fait déja deux jours que je galère a cause d'un :hover qui ne marche pas. J'ai beau relire mon code et essayer differament je n'y arrive pas Etat Etat Etat

Si quelqu'un a une idée de la solution je suis tout ouie Content
Et puis j'aurais bien checker l'HTML de CCL pour voir comment ca a été fait mais c'est une telle usine a gaz incompréhensible....
Edit : j'ai trouvé un :hover la dedans et c'est fait comme moi......sauf que moi ca marche pas....

C'est juste un petit menu :

L'HTML :

Code:
 <!DOCTYPE html>
<html>
  <head>
    <meta name="author" content="Mathieu H">
    <meta charset="utf-8">
    <html lang="fr">
    <meta name="description" content="Tes mots pour le référencement">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css.css">
    <title>Le nom de ton site/de la page</title>
  </head>
  <body>
    <nav class="menu-nav">
      <ul>

         <li class="bouton"><a href="index.html">Accueil</a></li>
         <li class="bouton"><a href="news.html">Actualités</a></li>
         <li class="bouton"><a href="lang.html">Langue</a>
            <ul>
               <li class="sbtn"><a href="#">Syntaxe/Grammaire</a></li>
                  <li class="sbtn"><a href="#">Phonétique</a></li>
                  <li class="sbtn"><a href="#">Lexique</a></li>
                  <li class="sbtn"><a href="#">Par niveau</a>
                     <ul>
                        <li class="ssbtn"><a href="#">A1</a></li>
                        <li class="ssbtn"><a href="#">A2</a></li>
                        <li class="ssbtn"><a href="#">B1</a></li>
                        <li class="ssbtn"><a href="#">B2</a></li>
                        <li class="ssbtn"><a href="#">C1</a></li>
                        <li class="ssbtn"><a href="#">C2</a></li>   
                     </ul>
                  </li>
                  
            </ul>
         </li>
         <li class="bouton"><a href="culture.html">Culture</a></li>
      </ul>

   </nav>
  </body>
</html>


Le CSS :

Code:
html {
  background-color: white;
  font-size: 20px;

}

nav > ul {

   padding: 0px;
   margin: 0px;
   list-style-type: none;

}

nav > ul::after {
   content: "";
   display: block;
   clear: both;

}

nav > ul > li {
   float: left;
   position: relative;

}

nav li {
   list-style-type: none;

}
.sbtn {
   display: none;

}

nav li:hover .sbtn {
   display: inline block;
   position: absolute;
   top: 100%;
   left: 0px;
   padding: 0px;
   z-index: 1000;

}

nav {
   width: 100%;
   background-color: #424558;

}

nav a {
   display: inline-block;
   text-decoration: none;

}

nav > ul > li > a {

   padding: 20px 30px;
   color: #FFF;

}




.sbtn li {
   border-bottom: 2px solid black;

}

.sbtn li a {

   padding: 15px 30px;
   text-decoration-style: none;
   font-size: 13px;
   color: #222538;
   width: 270px;

}



Merci pour l'aide !
Voir le profil de l'utilisateur Envoyer un message privé
AndrewTawin @
Cultivateur
Cultivateur

1140pts

Inscrit le: 07 juin 2019
Messages: 510
Localisation: Lille
Navigateur : Opera

Hors ligne
Message Posté le: 16 avril 2021 à 13:45  Lien permanent
Répondre en citant
Hello,

Juste parce que te donner la réponse tout de suite n'est pas formateur, je vais donc te donner une piste.

Regarde ta structure en html et le code css que tu as mis, cela devrait te donner une bonne piste. (pas sur que ça fonctionne avec cette piste Clin d'oeil)

EDIT: Je connais pas ton niveau en html/css, mais en général quand on est bloquer on passe à autre chose et on revient dessus plus tard, généralement ça fonctionne bien Clin d'oeil
Voir le profil de l'utilisateur Envoyer un message privé
GrizzliGourmet @
Saisonnier
Saisonnier

242pts

Inscrit le: 06 novembre 2020
Messages: 24
Localisation: Au milieu des volcans !
Navigateur : n.c.

Hors ligne
Message Posté le: 16 avril 2021 à 13:56  Lien permanent
Répondre en citant
Salut, j'ai noté plusieurs problèmes dans ton code, comme une répétition de la balise html dans le head. Dans le css, il y avait des propriétés qui n'existe pas. Je me suis permis de modifier ça. Le code ci-dessous ne respecte pas les bonnes pratiques, mais j'ai pas trop le temps de te montrer un exemple propre

Code:
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta name="author" content="Mathieu H">
    <meta charset="utf-8">
    <meta name="description" content="Tes mots pour le référencement">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css.css">
    <title>Le nom de ton site/de la page</title>
    </head>
<body>
<nav class="menu-nav">
    <ul>

        <li class="bouton"><a href="index.html">Accueil</a></li>
        <li class="bouton"><a href="news.html">Actualités</a></li>
        <li class="bouton"><a href="lang.html">Langue</a>
            <ul>
                <li class="sbtn"><a href="#">Syntaxe/Grammaire</a></li>
                <li class="sbtn"><a href="#">Phonétique</a></li>
                <li class="sbtn"><a href="#">Lexique</a></li>
                <li class="sbtn"><a href="#">Par niveau</a>
                    <ul>
                        <li class="ssbtn"><a href="#">A1</a></li>
                        <li class="ssbtn"><a href="#">A2</a></li>
                        <li class="ssbtn"><a href="#">B1</a></li>
                        <li class="ssbtn"><a href="#">B2</a></li>
                        <li class="ssbtn"><a href="#">C1</a></li>
                        <li class="ssbtn"><a href="#">C2</a></li>
                    </ul>
                </li>

            </ul>
        </li>
        <li class="bouton"><a href="culture.html">Culture</a></li>
    </ul>

</nav>
</body>
</html>


Code:
html {
  background-color: white;
  font-size: 20px;
}
body {
  margin: 0;
}

nav > ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  background-color: #424558;
  padding: 0;
}

nav > ul > li {
  list-style: none;
  display: inline-block;
}

nav > ul > li > a {
  padding: 20px 30px;
  color: #FFF;
  text-decoration: none;
  display: inline-block;
}

nav > ul::after {
  content: "";
  display: block;
  clear: both;
}
.bouton > ul {
  display: none;
  position: absolute;
  background-color: #424558;
}
.bouton ul li {
  list-style: none;
}
.bouton ul li a {
  text-decoration: none;
  color: #fff;
  padding: 5px 12px;
  display: block;
}

.bouton:hover > ul {
  display: block;
  padding: 10px 15px;
  min-width: 200px;
}

.sbtn li {
  border-bottom: 2px solid black;
}
.sbtn li a {
  padding: 15px 30px;
  text-decoration: none;
  font-size: 13px;
  color: #222538;
  width: 270px;

}


Voir le profil de l'utilisateur Envoyer un message privé
TheBestOfTheWorst @
Ouvrier agricole
Ouvrier agricole

411pts

Inscrit le: 08 février 2021
Messages: 147

Navigateur : n.c.

En ligne
Message Posté le: 16 avril 2021 à 16:01  Lien permanent
Répondre en citant
Merci !
Voir le profil de l'utilisateur Envoyer un message privé
Sauter vers: 
Surveiller les réponses de ce sujet CowcotLand topic RSS feed  

Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum


Sujets similaires

Sujet Auteur Forum Réponses Posté le
Pas de nouveau message Probleme PC ecran noir + freeze keldar L'atelier 2 16 mai 2021 à 14:44
Pas de nouveau message Problème de freeze tout les 10 sec qui s'intensifie Defcone Divers Hardware 4 09 mai 2021 à 12:05
Pas de nouveau message Problème d'usb avec les AGESA AMD pour Ryzen ??? Spouny Hardcore 5 03 mai 2021 à 11:48
Pas de nouveau message Problème avec mon rgb suite à une surtension Dytuer Composants 13 28 avril 2021 à 08:58
Pas de nouveau message Problème ventilateur R9 380 Gigabyte Gaming G1 4 Go: keldar Refroidissement 11 25 avril 2021 à 14:31