background-color sur ma section nav.

impossible de mettre une couleur d'arriere plan

Sujet résolu

guystephanefoudambazoa

28 mars 2020 à 14:19:26

bonjour...!

ça fait environ une semaine que je me suis lancé dans le html/css.

lors d'un tp de creation de menu deroulant je me suis retrouvé face à une difficulté:

ma balise structurante <nav> n'a pas d'arrière plan et je n'arrive pas à trouver où j'ai bien pu faire une erreur.

tout aide sera bienvenue.

merci !!!!

voilà mon code:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>creation d'un menu</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li id="menu-html"><a href="html.html">html</a>
                    <ul class="submenu">
                        <li><a href="#">cours complet de html et css</a></li>
                        <li><a href="#">références des elements html</a></li>
                        <li><a href="#">références des attributs html</a></li>
                        <li><a href="#">Exemple et exercices</a></li>
                    </ul>
                </li>
                <li id="menu-css"><a href="css.html">css</a>
                    <ul class="submenu">
                        <li><a href="#">cours complet de html et css</a></li>
                        <li><a href="#">références des propriétés css</a></li>
                        <li><a href="#">Exercices</a></li>
                    </ul>
                </li>
                <li id="menu-jsc"><a href="javascript.html">javascript</a>
                    <ul class="submenu">
                        <li><a href="#">cours complet javascript</a></li>
                        <li><a href="#">Exercices</a></li>
                    </ul>
                </li>
                <li id="menu-con"><a href="contacts.html">contacts</a></li>
            </ul>
        </nav>
    </body>
</html>

style.css

body{
    font-family: 'Source code pro', Calibri, Serif;
    margin: 0px;
    padding: 0px;
}

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


nav > ul{
    margin: 0px;
    padding: 0px;
}

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

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

nav > ul > li >a{
    padding: 20px 30px;
    color: darkgreen;
}

nav li{
    list-style-type: none;
}

.submenu{
    display: none;
}

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

-
Edité par guystephanefoudambazoa 28 mars 2020 à 16:33:42

AbcAbc6

28 mars 2020 à 16:56:02

Bonjour, vous avez une erreur de syntaxe dans le CSS à la ligne 19 c'est deux point pas un égal.

erreur que vous auriez pu voir grâce au validateur CSS => http://jigsaw.w3.org/css-validator/

Pour votre navigation vous utilisez les flottants, de ce fait les éléments sorte du flux courant et ne ce trouve plus dans le <nav> mais par dessus; Quelle est la hauteur d'un élément vide? Zéro. D’où le fait que vous ne voyer pas la background de la nav.

Pour palier à ce problème, deux solution possibles

un overflow: hidden; sur le parent du flottant
ou un clear sur l'élément qui suit le flottant.

A vous de voir la solution qui vous convient le mieux pour votre projet.

PS : attention avec les width: 100% sur les block, au mieux cela ne fait rien, au pire il y a débordement. Lire https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Bon dev

-
Edité par AbcAbc6 28 mars 2020 à 16:59:02

guystephanefoudambazoa

28 mars 2020 à 19:13:39

oulala

grand merci

c'est certainement du à un manque de réflexes

dorénavant j'écarquillerai d'avantage les yeux

et merci une fois de plus pour les références.