28172 sujets

CSS et mise en forme, CSS3

[Résolu] Div qui ne se suivent pas

Bonjour,

J'ai un petit soucis que je n'arrive pas à résoudre:

J'ai une navbar, ensuite une div principale en position: absolute; et j'aimerai mettre une div à la suite de celle-ci, seulement elle apparaît sous ma navbar...

Je pense que le problème vient de la position: absolute; de la précédente mais si j'enlève ça, c'est ma première div qui passe sous la navbar, et plus possible de la faire redescendre, que ce soit avec margin ou autre...

Mon HTML:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Sen&display=swap" rel="stylesheet">
    <title>Document</title>  
</head>
<body>
    <div class="container">
        <header>
            <nav>
                <ul>
                    <h1>Salom&eacute; Bara&euml;r</h1>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html">A propos</a></li>
                    <li><a href="index.html">Contact</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <div class="showcase">
        <div>
            <h2>Salom&eacute; Bara&euml;r Tattoo</h2>
            <h3>Ea consequat minim do enim aliqua nulla sit esse laborum ipsum irure labore ea.</h3>
        <div class="wrapper">    
            <p class="item1"><figure><img src="img/femme.jpg" alt="Deer Woman"><p class="legend">Reprehenderit occaecat excepteur consequat nostrud ea occaecat enim fugiat sit aliqua dolore nostrud eiusmod. Exercitation consectetur non deserunt et excepteur.<br> Quis cillum eiusmod nulla consequat aliquip irure consectetur ad est labore occaecat quis do commodo. Nisi cupidatat deserunt mollit occaecat id cupidatat eu in officia ex elit culpa elit aliqua. Id mollit aliquip culpa veniam duis in ad reprehenderit et eu laboris minim cillum fugiat.</p></figure>
            <p class="item2"><figure><img src="img/recap.jpg" alt="Recap Of The Year"><p class="legend">Eu labore et culpa deserunt. Consequat consectetur amet tempor ipsum dolor amet voluptate. Nulla excepteur reprehenderit fugiat irure adipisicing laborum ex ullamco reprehenderit magna est aute.</p></figure>
            <p class="item3"><figure><img src="img/skull.jpg" alt="Three Eyed Skull"><p class="legend">Aute cupidatat ex reprehenderit culpa quis eiusmod dolore in in enim id et consequat do. Laboris minim culpa nulla eu eu labore sit est eiusmod. Est sunt occaecat est duis sunt voluptate sint enim exercitation nisi exercitation ea. Ea officia aliqua sit aliquip sint nostrud officia sit tempor deserunt. Enim sit sint elit elit reprehenderit qui deserunt nulla labore tempor.</p></figure>
        </div>
        </div>       
    </div>
    <div class="about">
        
        
    </div>
</body>
</html>


Mon CSS: 

body{
    padding: auto;
    margin: 0;
    font-family: 'Sen', sans-serif;
    background-color: #000;
}
/* NAVBAR */
.container{
    float: left;
    margin: 0;
    padding: auto;
    background-color: #181818;
}
nav{
    z-index: 1;
    height: auto;
    width: 170em;
    background-color: #181818;
    color: #eee;
    position: fixed;
}
nav ul{
    padding: 0 20px;
}
h1{
    padding: 0 30px;
    display: inline;
    border-right: 2px solid white;
}
nav li{
    padding: 0 20px;
    display: inline;
    font-size: large;
}
nav a{
    display: inline-block;
    color: #eee;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
}
a::after{
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: white;
    
}
a:hover::after{
    width: 100%;
    transition: width .3s;
}

/* SHOWCASE */

.showcase{
    clear: left;
    position: absolute;
    border-style: solid;
    width: 1600px;
    height: 1300px;
    margin: 200px 150px;
    background-color: #000;
    color: white;
}
h2{
    margin: 37.35px auto 0 auto;
    padding: 20px 0;
    font-size: 45px;
    text-align: center;
    text-transform: uppercase;
}
h3{
    margin: 0;
    padding: 50px;
    font-size: 25px;
    text-align: center;
}
.wrapper{
    display: grid;
    width: 1600px;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0;
    grid-auto-rows: minmax(100px, auto);
}       
figure{
    width: 10px;
    padding: 0;
    margin: 0;
}
img{
    width:  460px;
    height: 700px;
    margin: 20px 20px 20px 0;
    padding-top: 2em;
    padding-left: 2.2em;

}
.item1{
    grid-area: a;
    align-self: center;
    justify-self: center;
}
.item2{
    grid-area: b;
    align-self: center;
    justify-self: center;
}
.item3{
    grid-area: c;
    align-self: center;
    justify-self: center;
}
.legend{
    width: 450px;
    text-align: center;
    padding-left: 35.2px;
}

/* ABOUT */

.about{
    position: absolute;
}


J’espère que mon explication est claire Smiley sweatdrop

Merci d'avance en tout cas!
Bonjour,

Le soucis vient en effet de la position absolute. IL faut l'enlever car ce n'est pas la solution pour faire ce que vous désirez faire.
Si votre div remonte, c'est parce que celle qui contient la nav n'a plus de consistance. En gros elle a une height de 0. Pourtant elle a du contenu mais vous avez mis la balise nav en poistion fixed. Donc comme elle sort complètement du flux. Vous devez mettre un margin-top sur le contenu.

Voici une correction : https://codepen.io/guillaume-flament/pen/zYGVXXQ?editors=1100
Sujet clos
Aller à