Forum : Problème d'affichage HTML

J'ai un problème avec mon code, j'ai parfaitement réussi à coder ma première section, cependant, lorsque je veux enchaîner sur une seconde, rien ne s'affiche en-dessous de mon bandeau supérieur

<body>
    <section class="top-page">
            <header id="header" class="header">
                <img src="imagez/Gogo's life.png" alt="Gogo's life" class="logo">
                    <div class="bandeau-supérieur">
                        <div class="bandeau-supérieur-inférieur"></div>
                        <ul class="nav-links">

                            <li><a href="#index.html">Houston<i class="scroll-icon fas fa-angle-down"></i></a>
                            </li>
                            <li><a href="#">PSG<i class="scroll-icon fas fa-angle-down"></i></a>
                            </li>
                            <li><a href="#">Tennis<i class="scroll-icon fas fa-angle-down"></i></a>
                            </li>
                            <li><a href="#">Musique<i class="scroll-icon fas fa-angle-down"></i></a>
                            </li>
                            <li><a href="#">École<i class="scroll-icon fas fa-angle-down"></i></a>
                            </li>
                            <li><a href="#">LOL<i class="scroll-icon fas fa-angle-down"></i></a>
                         </li>
                        </ul>
                    </div>
                </header>
    </section>

    <h1 class="maman">maman</h1>
</body>

Merci de m'aider !

Arzou

Envoi ton css stp

gogocbo

Auteur

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

{
margin: 0;
padding: 0;
scroll-behavior: smooth;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}

.top-page{
margin: none;
background-size: cover;
}

.logo {
width: 150px;
}

.nav-links{
display: flex;
list-style: none;
background-color: white;
width: 100%;
height: max-content;
justify-content: center;
height: 130px;
align-items: center;
}

.header {
position: absolute;
width: 100%;
height: 150px;
display: flex;
align-items: flex-start;
padding: 0 px;
background-color: burlywood;
}

.nav-links a {
font-weight: 650;
color: black;
text-decoration: none;
position: relative;
transition: transform 0.4s;
width: 100%;
}

/ .nav-links::before {
content: '';
background-color: black;
position: absolute;
bottom: 0%;
height: 20px;
width:auto;
}
/
.nav-links li {
margin: 50px;
}

.bandeau-supérieur-inférieur{
display: flex;
background-color: black;
height: 20px;
position: absolute;
bottom: 0%;
width: 100%;
background-size: cover;
}

.bandeau-supérieur{
width: 100%;
height: 10vh;
}

.maman{
color: black;
}

// y a sûrement bcp de trucs en trop mais je comprends pas toutes le commandes d'agencement encore //

Arzou

Ton h1 passe dernière ta section en fait, parce qu'elle est en position absolute.
Pourquoi mettre ton .nav-links::before et ton header en absolute ?

gogocbo

Auteur

mon .nav-links::before est en commentaire je voulais l'enlever
pour la section je l'ai mis en absolute parce qu'elle se place n'importe comment sinon
je sais pas trop comment arranger le problème

Arzou

Alors explique moi comment tu voudrais placer ta section. Parce que la placer en absolute quand on ne sait pas trop ce qu'on fait, c'est souvent la merde après ;)
Donc on va régler ce problème, et ça réglera le souci initial

gogocbo

Auteur

En fait je veux placer ma première section en haut de page puis faire une deuxième section que j'ai pas codé qui apparaisse en-dessous de ma première section. Merci de m'aider

Arzou

D'accord, du coup ta position absolute ne sert à rien, si tu la vire, tout marche non ?

gogocbo

Auteur

Non justement, c'est bien pour ça que je l'avais mise, les éléments ne se placent pas au bon endroit sans cette commande.

Arzou

C'est à dire ? Ils se placent comment ? Qu'est ce qui ne va pas ?

Problème d'affichage HTML

9 réponses