Forum : Problème avec les sections

Bonjour, j'essaye de mettre en place des sections, mais lorsque je met la première section appelé "twitter" de 600px de hauteur celle-ci se met directement dans le header au lieu de se mettre à la suite, pourtant la balise de section ne se trouve pas à l'intérieur du header mais en dehors afin de bien séparer la section du header. Merci à ceux qui m'aideront.

aperçu :

section#twitter {
    background-color: black;
    height: 600px;
}

.header {
    width:100%;
    height:50%;
    position:absolute;
}

#header_bg {
    background: -webkit-linear-gradient(top left, #243B55, #141E30);
    background: -moz-linear-gradient(bottom right, #243B55, #141E30);
    background: -o-linear-gradient(bottom right, #243B55, #141E30);
    background: linear-gradient(to bottom right, #243B55, #141E30);
}

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Projet</title>
        <link rel="stylesheet" type="text/css" href="//localhost/projet/css/main.css" />
        <link rel="stylesheet" type="text/css" href="//localhost/projet/css/button.min.css" />
    </head>
    <body>
        <header class="header" id="header_bg">

        </header>
        <section id="twitter">

        </section>
    </body>
</html>

2 réponses

Benjamin Derepas

Déjà, pourquoi rajouter un id à ton header ? Tu peux mettre les propriétés liées au bg dans .header.
Secondo, pourquoi ton header est en position absolute ? Et tu lui définis une hauteur de 50%, mais cette valeur est relative à son parents. Donc sois tu attribus une taille de 100% à ton document comme ceci :

html,body{height:100%;}

Au quel cas ton header prendra bien la moitier de la hauteur de la page.

Sois, solution plus logique, tu le positionne en relatif (valeur initiale) et tu lui définis une valeur en pixel .
voilà le code final :

.header{
    height: 100px;
     background: -webkit-linear-gradient(top left, #243B55, #141E30);
    background: -moz-linear-gradient(bottom right, #243B55, #141E30);
    background: -o-linear-gradient(bottom right, #243B55, #141E30);
    background: linear-gradient(to bottom right, #243B55, #141E30);
}
.twitter{
 height:600px;
 background:#000;
}

Amadou Dia

Auteur

Ah oui c'est vrai, j'y avais vraiment pas pensé, un très grand merci à vous pour votre réponse.