backgroud-color du <nav> n'apparaît pas

**haddocks** · 24/11/2019, 23h16

Bonjour,

Mon problème est que avec ce début de code je devrais en être là:

Nom : bandeau.JPG
Affichages : 403
Taille : 32,7 Ko

et voilà le résultat que j'obtiens: les couleurs de fond ne s'affiche pas en particulier dans <nav>.

Nom : RESULTAT.JPG
Affichages : 366
Taille : 18,5 Ko

En plus je l'ai fait en suivant le tuto. Voici l'adresse du tuto:

j'en ai fais d'autres sans problème, mais là je vois pas

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<DOCTYPE!>
<html>
    <head>
        <title>menu responsive deroulant</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="deroulant responsive pierre giraud.css">
 
    </head>
    <body>
        <nav>
            <label for="menu-mobile" class="menu-mobile">menu</label>
            <input type="checkbox" id="menu-mobile" role="button">
            <ul>
            <li class="menu-html"><a href="#">HTML</a>
                <ul class="submenu">
                    <li><a href="#">Cours HTML et CSS</a></li>
                    <li><a href="#">Elements HTML</a></li>
                    <li><a href="#">Attribut HTML</a></li>
                    <li><a href="#">Exercices</a></li>
                </ul>
            </li>
            <li class="menu-css"><a href="#">CSS</a>
                <ul class="submenu">
                    <li><a href="#">Cours HTML et CSS</a></li>
                    <li><a href="#">Elements HTML</a></li>
                    <li><a href="#">Attribut HTML</a></li>
                    <li><a href="#">Exercices</a></li>
                </ul>
            </li>          
            <li class="menu-js"><a href="#">JavaScript</a>
               <ul class="submenu">
                    <li><a href="#">Cours HTML et CSS</a></li>
                    <li><a href="#">Elements HTML</a></li>
                    <li><a href="#">Attribut HTML</a></li>
                    <li><a href="#">Exercices</a></li>
                </ul>  
            </li>
            <li class="contact"><a href="#">Contact</a></li>
           </ul>
        </nav>
    </body>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
body {
    margin: 0px;
    padding: 0px;
}
nav {
    width: 100%;
    background-color: grey;
}
nav > ul {
    margin: 0px;
    padding: 0px   
}
nav li {
    list-style-type: none;   
}
nav > ul > li {
    float: left;
    position: relative;
}
nav > ul:after{
    content= "";
    display: table;
    clear: both;
}
.submenu {
    display: none
}
nav input[type="checkbox"]{
    display: none;
}
nav label {
    display: none;
}
nav a {
    display: inline-block;
    text-decoration: none;  
}
nav > ul > li > a{
    padding: 20px 30px;
    color: blue;
}

Invité · 25/11/2019, 10h05

Bonjour,

@haddocks

deroulant responsive pierre giraud.css : tu devrais éviter les espaces (et accents) dans les noms de fichier.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
nav > ul > li {
    float: left;
    position: relative;
}

Le float: left; fais SORTIR les <li> du flux, donc du <nav>.
Du coup, le <nav> a une hauteur nulle : on ne voit pas son background.

FAQ CSS : Comment faire pour qu'un conteneur englobe ses enfants flottants ?
-> ajouter overflow : hidden; sur le <nav> (ou le >ul>)

Sinon, remplace par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
nav > ul > li {
    display: inline-block;
    position: relative;
}

N.B. On utilise de moins en moins les float (à cause justement du fait qu'il SORTENT les éléments du flux).
Voir :

display:table;
display:flex;

**haddocks** · 25/11/2019, 13h33

Bonjour,
jreau62:

"Le float: left; fais SORTIR les <li> du flux, donc du <nav>.
Du coup, le <nav> a une hauteur nulle : on ne voit pas son background."

En fait le "clear" est réalisé par le fameux "hack CSS" sur <ul>, de la ligne 21 à 25, mais c'est peut être de là que vient le problème. Dans le tuto c'est ce qui à été fait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
nav > ul:after{
    content= "";
    display: table;
    clear: both;
}

A vous

Ce soir j'essaierais de supprimer les espaces au nom du fichier CSS. Je vous tiens au jus.
Merci.

Invité · 25/11/2019, 13h39

Voici un hack correct (et très utilisé) :

"hack clearfix"

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.clearfix { *zoom:1; }
.clearfix::before, .clearfix::after { display:table; content:''; }
.clearfix::after { clear:both; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<ul class="clearfix">
....

**haddocks** · 25/11/2019, 13h54

J'avais encore jamais vu ça, cool.

En fait tu fais 3 propositions de clearfix et s'est le navigateur qui va prendre ce qu'il lui faut ?

Invité · 25/11/2019, 13h58

C'est globalement le même code que le tien, sauf qu'il est appliqué à une classe "clearfix".

**Jmeuh** · 28/11/2019, 23h34

Bonjour,

j'ai testé ton code et il y a une erreur de syntaxe dans ton css ligne 22. Remplace " = " par " : " . Ça réglera le problème de la couleur.

Je suis moi aussi débutant et je ne sais pas si ma solution est bonne mais tu peux remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
nav > ul:after{
    content: "";
    display: table;
    clear: both;
}

par "overflow: hidden;" pour le même résultat " visuel " dans le style nav{}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
nav {
    width: 100%;
    background-color: grey;
    overflow: hidden;
}

Si tu a d'autres problèmes n'hésites pas ça me fait un bon exercice

**haddocks** · 08/12/2019, 21h22

Bonjour ou Bonsoir,

Désolé pour mon absence mais j'ai été un peu débordé ces dernier temps.

Tout d'abord merci Jreau62 car ta solution marche impec

.

Merci également Jmeuh car ça fait vraiment du bien de comprendre ses erreurs. Je dois dire que c'était une erreur stupide. A me mettre des baffes

Bon Jmeuh comme je suis du genre à vouloir tout comprendre, ta proposition du "overflow: hidden;" sur la balise <nav> marche impec aussi... MAIS, pourquoi elle ne fonctionne pas sur "nav>ul qui est le parent direct de nav>ul>li ??

Et merci à tous les participants de ce post.

**Jmeuh** · 08/12/2019, 22h22

Envoyé par haddocks

Bon Jmeuh comme je suis du genre à vouloir tout comprendre, ta proposition du "overflow: hidden;" sur la balise <nav> marche impec aussi... MAIS, pourquoi elle ne fonctionne pas sur "nav>ul qui est le parent direct de nav>ul>li ??

Je sais pas quoi te dire, j'ai fait le test sur ton code et dans " nav > ul " ça donne le même résultat.
J'ai peut être mal comprit ta question.

**haddocks** · 08/12/2019, 23h30

Tu avais parfaitement bien compris Jmeuh. En fait il manquait un ; à la fin de la ligne padding juste au-dessus.
Tout s'explique en fait, ça commence à me plaire

Nom : point virgule.JPG
Affichages : 313
Taille : 15,4 Ko

il faut que je sois plus vigilant sur la syntaxe.

y a pas des programmes qui pourrait détecter ce genre d'erreur toute bête ?

**Jmeuh** · 08/12/2019, 23h39

Fait attention à la coloration syntaxique tes erreurs sont mises en évidence. Il y a aussi la console de ton navigateur mais tu ne verra pas les erreurs de style.

**haddocks** · 09/12/2019, 09h53

Bonjour Jmeuh,
Franchement le "=" a la place des ":", ça se voyait pas et rien en ce qui concerne le ";" manquant.
Mon éditeur est Braket, est ce qu'il y en a un meilleur pour ça?

Invité · 09/12/2019, 10h35

Bonjour,

1- Manifestement, tu n'as pas CLIQUE sur les liens que je t'ai donnés :

Envoyé par jreaux62

FAQ CSS : Comment faire pour qu'un conteneur englobe ses enfants flottants ?
-> ajouter overflow : hidden; sur le <nav> (ou le >ul>)

2- Regarde dans la console -> touche clavier "F12".
Et aussi :

**haddocks** · 09/12/2019, 10h57

Ok
Je vais fermer ce poste car il n'a plus beaucoup de rapport avec le sujet de départ.
A une prochaine fois sur un autre post.

Merci a tous et a toutes.

backgroud-color du <nav> n'apparaît pas

CSS

Discussions similaires

Partager

Partager