Espace blanc entre mes sections

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par color13, 28 Janvier 2020.

Tags:
  1. color13
    color13 Nouveau WRInaute
    Inscrit:
    28 Janvier 2020
    Messages:
    4
    J'aime reçus:
    0
    Bonjour,

    Je me permet de poster sur ce forum car je n'arrive pas à enlever des espaces blancs entre chaque section de mon projet. Je commence en css/html donc j'ai du surement faire une erreur quelque part.
    J'ai beau tout essayer mais je vois pas d'où ça peut venir, voici quelques screens à l'appui ;
    Capture3.PNG
    Capture².PNG Capture.PNG
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 026
    J'aime reçus:
    291
    Sans URL, impossible à savoir.
     
  3. color13
    color13 Nouveau WRInaute
    Inscrit:
    28 Janvier 2020
    Messages:
    4
    J'aime reçus:
    0

    <!-- Afin de valider ton code HTML, fais un copier-coller de ce dernier et rends-toi sur https://validator.w3.org/#validate_by_input.
    Click sur l'onglet "Validate by Direct Input" et colle ton code HTML, click ensuite sur le bouton "Check", et tu verras ensuite (si tu en as) les erreurs HTML s'afficher plus bas.
    Tu peux jeter un oeil par ici pour en savoir un peu plus: https://www.243tech.com/valider-vos-codes-html-et-css-sur-validator-w3-org/ -->

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Wild Circus</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Amatic SC&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Fira Sans&display=swap" rel="stylesheet">
    </head>
    <body class="body">
    <header class="topbar">
    <h1>Wild <br> Circus</h1>
    <nav>
    <!-- TODO: Les liens du menu doivent nous emmener vers les sections correspondantes dans la page -->
    <a href="#Performances">Performances</a>
    <a href="#Aboutus">About Us</a>
    <a href="#Prices">Prices</a>
    <a href="#Contactus">Contact</a>
    </nav>
    </header>
    <section class="section">
    <img src="img/maincircus.jpg" class="imgmain" alt="">
    <h2 id="Performances" class="main">Performances</h2>
    <!-- TODO: En utilisant du css place ces trois performances ("lough", "dream, "marvel at") sur la même ligne en enlevant le point généré par la balise "li". Attention, utilise bien le css pour aligner les éléments, tu ne dois pas enlever les balises "li"-->
    <ul>
    <!-- performance 1 -->
    <li class="laugh">
    <h3>Laugh</h3>
    <p>As an adult, come and discover our irresistible clowns, between practical jokes and pranks let yourself be carried away by their joy and fall back into childhood.</p>
    </li>
    <!-- performance 2 -->
    <li class="dream">
    <h3>Dream</h3>
    <p>Let yourself be carried away in a world where the real and the imaginary are one, in the company of our talented magicians, discover a wonderful world limited only by your imagination.</p>
    </li>
    <!-- performance 3 -->
    <li class="marvel">
    <h3>Marvel at</h3>
    <p>Tame the untameable in the company of our tamers, between roar and razor-sharp claws, watch these fierce felines turn into sweet kittens.</p>
    </li>
    </ul>
    </section>
    <hr/>
    <div class="before"></div>
    <section id="banniere">
    <h2 id ="Aboutus" class="aboutus">About Us</h2>
    <p class="aboutimg">
    <strong>Wild Circus</strong> <br> is a recent circus company because it was created in 1999, the year I was born, by my parents. <br>
    It is with these animals that I have seen grow up and aim back that I come to talk to you about what he advocates.
    </p>
    <p class="aboutusone">
    Today, he is showing great success all over the world because his primary will is to raise animals in a respectable way not as they were at the time.
    Here, animals are kings and spectators are their best friends!
    Come and discover the many aerobatic shows that acrobats meticulously prepare for you.
    Your eyes will be on the air as well as on the floor of our fabulous.
    </p>
    <p class="aboutustwo">
    Our animals: lions, elephants, dogs, tigers and so on ... Our clown named Hector has prepared many jokes for you all funnier than each other! Several activities are available to the most curious such as feeding our animals, pampering them, caressing them and training them .
    Acrobatic courses are also available!
    </p>
    <p class="aboutustree">
    Don’t hesitate to contact us for more information! Our circus is intergenerational, here no one is bored everyone is lulled by our sweet magic.
    From the director of your circus who is eagerly waiting for you, Guillaume Bleyer and all his company and animals. <br> <strong> See you soon! </strong>
    </p>
    <video id="video" autoplay="autoplay" loop="loop" muted="muted">
    <source src="vid/media.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">Sorry, your browser does not support HTML5 video.</video>
    <!-- TODO: Cette section n'a pas encore été réalisée, tu as carte blanche pour nous montrer ta créativité -->
    </section>
    <div class="after"></div>

    <section>
    <img src="img/conor-samuel-pMsebqxRnxs-unsplash.jpg" class="downimg" alt="">
    <h2 id="Prices">Prices</h2>
    <table>
    <tr>
    <th></th>
    <th>Adultes</th>
    <th>Enfants de moins de 12 ans</th>
    <th>Groupes (plus de 10 personnes)</th>
    <th>Ecoles</th>
    </tr>
    <tr>
    <td>Semaines hors mercredi</td>
    <td>150$</td>
    <td>$100</td>
    <td>$100</td>
    <td>$100</td>
    </tr>
    <tr>
    <td>Week-end et mercredi</td>
    <td>150$</td>
    <td>150$</td>
    <td>150$</td>
    <td>$100</td>
    </tr>
    </table>
    <!-- TODO: Réalise un tableau qui présente les différents prix. Exemple (aggrandis la fenêtre en largeur pour bien voir l'exemple ci-dessous) :

    | Adultes | Enfants de moins de 12 ans | Groupes (plus de 10 personnes) | Ecoles
    Semaines hors mercredi | | | |
    week-end et mercredi | | | |
    -->
    </section>

    <section>
    <h2 id="Contactus">Contact Us</h2>
    <div class="container">
    <form action="action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">

    </form>
    </div>
    <!-- TODO: Réalise un formulaire de contact avec les champs email et message plus un bouton pour envoyer le message. Pense bien à ajouter les labels pour les différents champs
    Ce formulaire n'a pas besoin d'être fonctionnel, réalise juste la mise en forme.
    -->
    </section>

    <footer class="footer">
    <!-- TODO: Entre ton nom et prénom.
    Mets en place un lien vers le site de la Wild Code School (https://wildcodeschool.fr) ainsi que le lien vers ton profil public France.ioi (avec les 16 premiers exercies de réalisés).
    Tu peux egalement mettre un lien sur ton nom vers ton site, ton blog ou ton profil github ou linkedin, si tu en a un.
    -->
    <p>Wild Circus by [Ton nom] - France-IOI: [lien vers ton profil public France-IOI] - SoloLearn: [lien vers ton profil SoloLearn] - Wild Code School - [Date de réalisation du site]</p>
    </footer>
    </body>
    </html>

    * {
    margin:0;
    padding:0;
    }


    body {
    font-family: 'Amatic SC', cursive, sans-serif;
    font-size: 25px;
    margin: 0;

    padding: 0;
    }


    ul {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    font-size: 25px;
    background-image: url(img/backgroundcircus.jpg);
    background-position: center;
    background-size: cover;
    width: 100%;
    display: flex;
    padding: 300px 0;
    }

    .section ul {
    list-style-type: none;
    }



    .topbar {
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    padding: 30px;
    padding-top: 1px;
    }

    h1 {
    font-family: 'Fira Sans', sans-serif;
    font-size: 254px;
    opacity: 0.7;
    color: white;
    margin: 0;
    text-align: center;
    }

    a {
    color: white;
    opacity: 0.6;
    }

    .topbar a {
    margin: 0 45px;
    text-decoration: none;

    }

    .topbar nav a:hover {
    opacity: 1;
    text-decoration: underline;
    }

    .topbar nav {
    float: left;
    padding-left: 520px;
    }

    nav {
    font-size: 42px;
    }

    .main {
    border-radius: 16px;
    font-family: 'Amatic SC', sans-serif;
    font-size: 80px;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    color: rgb(0, 0, 0);
    position: absolute;
    text-align: center;
    margin: 17px 803px;
    z-index: 2;
    }

    .imgmain {
    background-image: url(img/maincircus.jpg);
    width: 100%;
    }

    .img {
    width: 100%;
    }


    .laugh {
    background-color: white;
    color: rgb(50, 67, 87);
    opacity: 0.5;
    font-size: 35px;
    text-align: center;
    font-weight: bolder;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);

    }


    .dream {
    background-color: white;
    opacity: 0.5;
    color: rgb(70, 17, 11);
    font-size: 35px;
    text-align: center;
    font-weight: bolder;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
    }

    .marvel {
    background-color: white;
    color: rgba(56, 99, 115, 1);
    opacity: 0.5;
    font-size: 35px;
    text-align: center;
    font-weight: bolder;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);

    }

    .marvel:hover {
    box-shadow: 0 0 57px rgb(255, 83, 83);
    }



    h3 {
    display: inline;
    }


    .aboutus{
    position: absolute;
    text-align: center;
    color: #FBFBFB;
    width: 100%;
    margin: 0;
    font-size: 70px;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
    padding: 35px 0px;
    }

    .aboutimg {
    position: absolute;
    border-radius: 43px;
    width: 83%;
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 40px;
    padding: 42px 0;
    margin: 152px 181px;
    background: #FBFBFB;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
    opacity: 0.8;
    }

    .aboutustwo {
    position: absolute;
    margin: 381px 1223px;
    text-align: center;
    background: #FBFBFB;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
    opacity: 0.8;
    width: 375px;
    padding: 40px;
    font-size: 31px;
    z-index: 3;
    overflow: hidden;
    }

    .aboutusone {
    position: absolute;
    margin: 367px 235px;
    text-align: center;
    background: #FBFBFB;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
    opacity: 0.8;
    width: 375px;
    padding: 40px;
    font-size: 31px;
    z-index: 4;
    }

    .aboutustree {
    position: absolute;
    margin: 591px 724px;
    text-align: center;
    background: #FBFBFB;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
    opacity: 0.8;
    width: 375px;
    padding: 40px;
    font-size: 35px;
    z-index: 4;
    }

    .aboutustree:hover {
    box-shadow: 0 0 57px rgb(251, 255, 0);
    }

    .aboutusone:hover {
    box-shadow: 0 0 57px rgb(255, 0, 191);
    }

    .aboutustwo:hover {
    box-shadow: 0 0 57px rgb(0, 255, 157);
    }

    #video {
    min-width: 100%;
    min-height: 100%;
    height:auto;
    width:auto;
    }

    #Prices {
    background: #f2f2f2;
    padding: 10px 227px;
    margin: 0 655px;
    font-size: 60px;
    text-align: center;
    }

    table {
    border-radius: 10px;
    background-color: #FBFBFB;
    border-collapse: collapse;
    margin: 31px 494px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
    }

    th, td {
    font-size: 30px;
    text-align: left;
    padding: 10px;
    }

    th {
    background-color: rgb(249, 255, 159);
    color: rgb(0, 0, 0);
    }

    tr:nth-child(even) {
    background-color: #f2f2f2;

    }

    #Contactus {
    padding: 10px 184px;
    margin: 21px 655px;
    background: #f2f2f2;
    font-size: 60px;
    text-align: center;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
    }


    input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical
    }

    input[type=submit] {
    background-color: #f9ff9f;
    color: rgb(0, 0, 0);
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    }

    input[type=submit]:hover {
    background-color: #ffffff;
    }

    .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: 13px 470px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, .5);
    }



    .downimg {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    z-index: -100;

    }


    footer p {
    margin: 0;
    }

    .footer {
    background-color: black;
    text-align: center;
    color: white;
    z-index: 1;
    }

    hr {
    margin: 0;
    }
     
  4. color13
    color13 Nouveau WRInaute
    Inscrit:
    28 Janvier 2020
    Messages:
    4
    J'aime reçus:
    0
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 026
    J'aime reçus:
    291
    Le codepen n'affiche pas la même chose que ton screen.
     
  6. color13
    color13 Nouveau WRInaute
    Inscrit:
    28 Janvier 2020
    Messages:
    4
    J'aime reçus:
    0
Chargement...
Similar Threads - Espace blanc sections Forum Date
Etrange : énorme espace blanc dans le cache Google Problèmes de référencement spécifiques à vos sites 17 Février 2012
WordPress Réduire un espacement sur twenty seventeen Développement d'un site Web ou d'une appli mobile 17 Février 2020
Admob sur une application/site avec espace membre AdSense 21 Octobre 2019
Déclaration du CA/Revenus pour entrepreneur en espace pub Droit du web (juridique, fiscalité...) 11 Avril 2019
Conformité RGPD : sous-domaines et cookies pour espace authentifié Droit du web (juridique, fiscalité...) 13 Novembre 2018
Contenu différent pour une même URL (espace membre) Problèmes de référencement spécifiques à vos sites 31 Octobre 2018
Espace de developpement en multi-site chez ovh Administration d'un site Web 13 Août 2018
Problème de namespace et constructeur parent. Développement d'un site Web ou d'une appli mobile 30 Novembre 2017
Balises title en double à cause de l'espace (%20 et +) Référencement Google 31 Mai 2017
Espace de stockage [Wordpress & hebergeur] Développement d'un site Web ou d'une appli mobile 13 Décembre 2016
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice