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

Poster un nouveau sujetRépondre au sujet
CowcotLand topic RSS feed Surveiller les réponses de ce sujet
TheBestOfTheWorst @
Meuhdérateur
Meuhdérateur

1434pts

Inscrit le: 08 février 2021
Messages: 720

Navigateur : n.c.
Hors 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

1195pts

Inscrit le: 07 juin 2019
Messages: 536
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 @
Paysan
Paysan

991pts

Inscrit le: 06 novembre 2020
Messages: 301
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é » Album Photos
TheBestOfTheWorst @
Meuhdérateur
Meuhdérateur

1434pts

Inscrit le: 08 février 2021
Messages: 720

Navigateur : n.c.
Hors 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é
Poster un nouveau sujetRépondre au sujet
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] - Internet bugue sur mon pc fixe Dwarfcherry Le poulailler 17 27 avril 2024 à 15:14
Pas de nouveau message [PROBLEME] - Stockage du disque système SSD erroné Dwarfcherry L'atelier 19 03 avril 2024 à 06:24
Pas de nouveau message Problème d'étanchéité entre la pompe et le reservoir lululaglue Watercooling 5 29 mars 2024 à 19:45
Pas de nouveau message Probleme voltage i9-9900k non oc Pr0phet Hardcore 6 29 mars 2024 à 08:31
Pas de nouveau message problème ou pas voltage i9-9990k Pr0phet Overclocking 7 22 mars 2024 à 05:22