problème de débordement

mettre à la ligne quand sa dépace

6 février 2023 à 0:02:21

Bonjour et vrmt merci de prendre de votre temps pour m'aider

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/sanitize.css"rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css">
    <title>test</title>
</head>

<body>

    <header class="header">
        <div class="header_container">
            <img src="/logo/logo-blanc.svg" alt=""  class="logo_titre">
            <p>L'expérience unique de la cénote la plus grande et la plus magique au monde!</p>
            <button><img src="/logo/souris.png" class="icone_sourie">Décourire</button>
        </div>
    </header>
    <nav>
        <ul>
            <li><a href="#">Acceuil</a></li>
            <li><a href="#">Nos activités</a></li>
            <li><a href="#">Cénote El PiT</a></li>
            <li><a href="#">Le centre</a></li>
            <li><a href="#">Tarifs</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <main>
           <div class="main_container">
                <div class="section"><img src="../images/snorkeling.jpg" alt="" class="album"><h1>Snorkeling</h1><p class="p_albumz">Vous désirez allier le loisir au sport de manière douce, le snorkelling est fait pour vous !<button>En savoir plus</button></p></div>
                <div class="section"><img src="/images/bapteme.jpg" alt="" class="album"><h1>Baptême</h1><p class="p_albumz">Découverte de la respiration et de l’évolution prolongée sous l’eau. Pour tous à partir de 6 ans.<button>En savoir plus</button></p></div>
                <div class="section"><img src="../images/exploration.jpg" alt="" class="album"><h1>Exploration</h1><p class="p_albumz">Seul(e) ou à plusieurs, encadré(s) ou autonome(s) en fonction de votre niveau et de votre envie.<button>En savoir plus</button></p></div>
                <div class="section"><img src="../images/formations.jpg" alt="" class="album"><h1>Formations</h1><p class="p_albumz">Passer vos brevets PADI, FFESSM ou SSI et accéder à d'autres types de plongées (profondeurs ou tek).<button>En savoir plus</button></p></div>
                <div class="section"><img src="../images/coaching.jpg" alt="" class="album"><h1>Coaching</h1><p class="p_albumz">Optimisez votre pratique de la plongée afin d'améliorer et de prolonger le plaisir qu'on en retire.<button>En savoir plus</button></p></div>
                <div class="section"><img src="../images/cadeau.jpg" alt="" class="album"><h1>Idée de cadeau</h1><p class="p_albumz">Faites plaisir pour un anniversaire, Noël, EVG/EVJF… Envoi rapide par email ou par courrier.<button>En savoir plus</button></p></div>
           </div>
    </main>
</body>

</html>

@font-face {
    font-family: "simple";
    src: url("/fonts/Quicksand/Quicksand-VariableFont_wght.ttf");
}

@font-face {
    font-family: "maroc";
    src: url("/fonts/Engagement/Engagement-Regular.ttf");
}

/*  ////////////////////////////////////////
    ////                                ////
    ////            HEADER              ////
    ////                                ////
    //////////////////////////////////////// */

.header {
    background-image: url("../images/header.jpg");
    background-size: cover;
    min-height: 100vh;
    font-family: "simple";
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
}

.header_container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 100px;
    margin-right: 400px;
}

.logo_titre {
    max-height: 8rem;
    ;
}

header button {
    color: white;
    background-color: rgba(255, 255, 255, 0);
    border-color: white;
    border-radius: 25px;
    padding: 8px 30px;
    margin-right: 100px;
    font-family: "simple";
    font-size: 20px;
    display: flex;
}

.icone_sourie {
    height: 24px;
    margin-right: 10px;
}

header div p {
    color: white;
    font-size: 24px;
    width: 450px;
    text-align: center;
}

/*  ////////////////////////////////////////
    ////                                ////
    ////            NAV                 ////
    ////                                ////
    //////////////////////////////////////// */
nav {
    position: sticky;
    top: 0px;
}

nav ul {
    display: flex;
    background-color: black;
    margin: 0;
    padding: 2rem;
    padding-left: 200px;
    font-family: "simple";
    font-size: 18px;
}

nav ul a {
    color: white;
    text-decoration: none;
    margin-left: 2.3rem;

}

/*  ////////////////////////////////////////
    ////                                ////
    ////            MAIN                ////
    ////                                ////
    //////////////////////////////////////// */
main {
    background-color: rgb(146, 165, 164);
    padding: 130px 220px;
}

.main_container {
    display: flex;

}

.main_container div {
    background-color: rgb(255, 255, 255);
    height: 100%;
}



.album {
    background-size: cover;
    width: 100%;
}

main div h1 {
    background-color: black;
    color: rgb(233, 233, 233);
    font-family: "maroc";
    font-size: 57px;
    margin: 0px 0px 20px 0px;
}

main div p {
    color: rgb(29, 55, 126);
    font-family: "simple";
    text-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 50px;
    font-size: 26px;
    gap: 2rem;
}

main div p button {
    text-align: center;
    width: 250px;
    padding: 10px 0px;
    background-color: rgb(10, 10, 119);
    color: white;
    border: none;
    font-size: 26px;
}

et ducoup mon problème c'est que dans mon main je veut mettre met 6 div à a la suite des autre mais que sa retourne aà la ligne pour que sa soit sur 2 lignes

Linaki.org

25 février 2023 à 10:39:19

@font-face {
    font-family: "simple";
    src: url("/fonts/Quicksand/Quicksand-VariableFont_wght.ttf");
}
 
@font-face {
    font-family: "maroc";
    src: url("/fonts/Engagement/Engagement-Regular.ttf");
}
 
/*  ////////////////////////////////////////
    ////                                ////
    ////            HEADER              ////
    ////                                ////
    //////////////////////////////////////// */
 
.header {
    background-image: url("../images/header.jpg");
    background-size: cover;
    min-height: 100vh;
    font-family: "simple";
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
}
 
.header_container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 100px;
    margin-right: 400px;
}
 
.logo_titre {
    max-height: 8rem;
    ;
}
 
header button {
    color: white;
    background-color: rgba(255, 255, 255, 0);
    border-color: white;
    border-radius: 25px;
    padding: 8px 30px;
    margin-right: 100px;
    font-family: "simple";
    font-size: 20px;
    display: flex;
}
 
.icone_sourie {
    height: 24px;
    margin-right: 10px;
}
 
header div p {
    color: white;
    font-size: 24px;
    width: 450px;
    text-align: center;
}
 
/*  ////////////////////////////////////////
    ////                                ////
    ////            NAV                 ////
    ////                                ////
    //////////////////////////////////////// */
nav {
    position: sticky;
    top: 0px;
}
 
nav ul {
    display: flex;
    background-color: black;
    margin: 0;
    padding: 2rem;
    padding-left: 200px;
    font-family: "simple";
    font-size: 18px;
}
 
nav ul a {
    color: white;
    text-decoration: none;
    margin-left: 2.3rem;
 
}
 
/*  ////////////////////////////////////////
    ////                                ////
    ////            MAIN                ////
    ////                                ////
    //////////////////////////////////////// */
main {
    background-color: rgb(146, 165, 164);
    padding: 130px 220px;
  height : 1500px;
}
 
.main_container {
    display: flex;
 
}
 
.main_container div {
    background-color: rgb(255, 255, 255);
    height: 500px;
    width: 500px;
    
}

.main_container div:nth-child(4), .main_container div:nth-child(5), .main_container div:nth-child(6) {
    position: relative;
    top: 500px;
    right: 1070px;
    background-color: rgb(255, 255, 255);
    height: 500px;
    
}
 
 
 
.album {
    background-size: cover;
    width: 100%;
}
 
main div h1 {
    background-color: black;
    color: rgb(233, 233, 233);
    font-family: "maroc";
    font-size: 57px;
    margin: 0px 0px 20px 0px;
}
 
main div p {
    color: rgb(29, 55, 126);
    font-family: "simple";
    text-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 50px;
    font-size: 26px;
    gap: 2rem;
}
 
main div p button {
    text-align: center;
    width: 250px;
    padding: 10px 0px;
    background-color: rgb(10, 10, 119);
    color: white;
    border: none;
    font-size: 26px;
}

Essaie ça !

Linaki, l'excellence garantie !

My website

problème de débordement

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

problème de débordement

mettre à la ligne quand sa dépace

problème de débordement

Supprimer

Modérer

Signaler le message aux modérateurs