Pourquoi et comment désactiver Adblocks uniquement pour cowcotland.com ?

Problème HTML/CSS

Poster un nouveau sujet Répondre au sujet

TheBestOfTheWorst @
Meuhdérateur

1448pts

Inscrit le: 08 février 2021
Messages: 725

Navigateur : n.c.
Hors ligne

Posté le: 16 avril 2021 à 11:21

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

Si quelqu'un a une idée de la solution je suis tout ouie

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 !

0 pour,
0

AndrewTawin @
Cultivateur

1235pts

Inscrit le: 07 juin 2019
Messages: 549
Localisation: Lille
Navigateur :

Hors ligne

Posté le: 16 avril 2021 à 11:45

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

)

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

0 pour,
0

GrizzliGourmet @
Paysan

991pts

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

Posté le: 16 avril 2021 à 11:56

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;

}

0 pour,
0

TheBestOfTheWorst @
Meuhdérateur

1448pts

Inscrit le: 08 février 2021
Messages: 725

Navigateur : n.c.
Hors ligne

Posté le: 16 avril 2021 à 14:01

Merci !

0 pour,
0

Poster un nouveau sujet Répondre au sujet

Sauter vers:

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

Sujet		Auteur	Forum	Réponses	Posté le
Sujets similaires
	probleme bizzare	tbonejones	Composants	21	26 octobre 2025 à 13:47
	Problème MàJ BIOS Crosshair X870E Hero	yaya744	Questions diverses...	9	05 octobre 2025 à 08:51
	MSI MAG 275QF, problème de calibrage	Comias	Ecrans	5	21 septembre 2025 à 18:17
	Problème sur le 2nd SSD qui n'écrit pas toujours au max	Terhka	Composants	13	24 août 2025 à 13:16
	problème de vitesse de pompe	jujudu24	Présentation	6	29 juillet 2025 à 17:59

Dernières actualités

voir +

[OS] - Passage à Linux (gaming, ....) [ OsLand ]
pasdoser il y a 2 heures.
[VENTE & DON] [ Ventes ]
eviledeath il y a 3 heures.
Logitech G23 racing wheel [ Périphériques ]
Encore il y a 3 heures.
Perte de performance apres longue session de jeu [ Mécano ]
loukass il y a 3 heures.
Config ITX AMD [ Estimations ]
mini-pouce il y a 4 heures.
Avis écran [ Périphériques ]
drul il y a 4 heures.
Satisfaction du jour 2025 [ Le poulailler ]
cordobaseb il y a 4 heures.
[VDS] RTX 3080 Gigabyte, waterblock Barrow, watercooling EK [ Ventes ]
kaobalt il y a 7 heures.
(eBay) Drop Décembre CG PNY (35 GPU) [ Le marché ]
JimBond007 il y a 7 heures.
Insatisfaction du jour 2025 [ Le poulailler ]
Kiki06 il y a 7 heures.
Tous les forums

Problème HTML/CSS

Sujets similaires