18041 sujets

Questions générales et questions de débutants

[Résolu] Éliminer l'espace entre le header et le nav

Salut, je suis nouveau aussi bien dans le développement web que dans ce site Smiley decu , donc s'il vous plais ayez de la patience et de soyez indulgent.
Merci d'avance.
Donc j'apprends le HTML5 et CSS3 et j'essaie de faire un site web (juste comme entrainement) simple avec un header et un nav.
Mais entre mon header et mon nav il y'a un espacement que j'aimerais qu'il disparaisse et que mon nav ça soit collé à mon header.
Voici le code : 

<body>
        <header>
            <img src="../racine/images/banniere-one-piece.png" alt="banniere" id="banniere">
            <a href="index.html" id="logo"><img src="../racine/images/Sans titre.png" alt="logo"></a>
        </header><!-- @whitespace
        --><nav>
              <ul id="menu-h">
                <li><a href="#0">MANGA</a></li>
                <li><a href="#1">DC COMICS</a></li>
                <li><a href="#2">MARVEL</a></li>
                <li><a href="#3">BANDE DESSINEE</a></li>
                <li><a href="#4">CONTACT</a></li>
                <li><a href="#5">RECHERCHE</a></li>
            </ul>
        </nav>
    </body>

            body {
                padding: 0;
                margin: 0;
                width: 100%;
                background-color: burlywood;
                
            }

            header {
                /*border: 1px solid yellow;*/
                
            }


            nav {
                background-color: tomato;
                padding: 1px 0px;
                margin: 0px;
                border: 0px;
                
            }

            ul #menu-h{
                margin: 0;
            }

            li {
                display: inline;
                padding: 20px 30px;
                
            }


            /* ID */
            #banniere {
                width: 100%;
                height: 200px;
                margin-bottom: 0;
                
            }

            #logo {
                float: left;
                position: absolute;
                top: 0px;
            }


Merci d'avance pour votre aide... Smiley smile
Modifié par varlok (11 Jul 2019 - 14:46)
Salut,
Pourrais-tu mettre une capture d'écran? J'ai recopié ton code dans codepen et je vois pas d'espace...
De plus, as-tu une version en ligne de tes images afin de pouvoir les intégrer?
Pour ceux qui veulent voir: https://codepen.io/anon/pen/VJRzpQ
Modifié par Mathieu8337 (11 Jul 2019 - 15:42)
Modérateur
si c'est l'image qui provoque cet espace, alors tu peut faire un reset sur vertical-align. top ou bottom, par defaut c'est baseline où se positionne le texte avec le jambage dessous, ou bien faire un reset sur display comme block (inline-block par défaut).
Meilleure solution
Génial.
Merci à toi gcyrillus, le vertical-align: bottom; fonctionne bien.

Merci Mathieu8337 pour ton aide aussi.

C'est cool de votre part.

Je ferme le sujet car résolue...

Bonne soirée.
gcyrillus a écrit :
ou bien faire un reset sur display comme block (inline-block par défaut).

En effet un display:block sur l'image c'est suffisant et ça fonctionne : https://codepen.io/anon/pen/VJRzpQ
J'ai également mis la hauteur en auto pour ta bannière, sinon l'image est déformée... Mais du coup ça fait haut pour une bannière^^
Sujet clos
Aller à