Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] probleme de marge

Sujet résolu
    16 octobre 2018 à 8:22:31

    Bonjour j'ai un problème avec mon footer je n'arrive pas a faire descendre la marge du footer vers le bas pour cacher l'espace j'ai mis la photo pour que vous voyez et les codes sources 
    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="utf-8" />
          <title>Test #1 - Le Site Web</title>
          <link rel="stylesheet" href="/a/CSS/style.css"/>
          <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
          <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    
       </head>
    <body>
    
    
        <header>
    <h1>Test #1</h1>   
     </header>
     
                
    <nav>
    <ul>   
    <li><a href="/a/PHP/test.php">Accueil</a></li>
    <li><a href="/a/index.html">Qui suis-je ?</a></li>
    <li><a href="/a/PHP/index.php">Livre d'or</a></li>
    </ul>
    </nav>
    
        
    <div class="main_content">
        <section>
     <aside>
    <h1>Objectif du site</h1>
    <p>Ce site a pour bute unique d'etre un exemple de site fait par moi, un projet de portfolio </p>
     </aside>
        <article>
    <h1>Bienvenue sur mon site de stockage de donnée</h1>
    <p>Sur ce site je stockerai des données superficiels qui serviront d'exemple,<br>
    comme c'est mon premier site sur mon nouveau PC j'ai vais mettre tous mes connaissances<br> 
    sur ce site pour garder en mémoire mon niveau et pouvoir montrer mon "level" aux autres.</p>
        </article>
            
        </section>
    
        <?php
    try
    {
    $bdd = new PDO("mysql:host=localhost;dbname=test;charset=utf8",
    "root", "", array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
    }
     
    catch(Exception $e)
    {
        die('Erreur : '.$e->getMessage());
    }
    
    $reponse = $bdd->query('SELECT * FROM jeux_video');
    
    
    // On affiche chaque entrée une à une
    while ($donnees = $reponse->fetch())
    {
    ?>
        <p>
        <strong>Jeu</strong> : <?php echo $donnees['nom']; ?><br />
        Le possesseur de ce jeu est : <?php echo $donnees['possesseur']; ?>, et il le vend à <?php echo $donnees['prix']; ?> euros !<br />
        Ce jeu fonctionne sur <?php echo $donnees['console']; ?> et on peut y jouer à <?php echo $donnees['nbre_joueurs_max']; ?> au maximum<br />
        <?php echo $donnees['possesseur']; ?> a laissé ces commentaires sur <?php echo $donnees['nom']; ?> : <em><?php echo $donnees['commentaires']; ?></em>
       </p>
    <?php
    }
    
    
        
    $reponse->closeCursor(); // Termine le traitement de la requête
    
    ?>
    
    </div>    
        
        
    <footer>
    <p>Copyright 2018 Reezy - Tous droits réservés <br />
    <a class="contact" href="mailto:samynantoy@gmail.com">Me contacter</a></p>
    </footer>
    
    
        
        </body>
    </html>
    
    
    
    
    
    .fond,section
    {
        color: black;
    }
    
    .contact
    {
        color: white;
    }
    
    footer
    {
        color: white;
    }
    
    p,footer,nav
    {
      font-family: 'Roboto', sans-serif;  
    }
    
    header,h1
    {
     font-family: 'Lobster', cursive;   
    }
    
    header
    {
        color: black;
        background-color: white;
        margin-right: -8px;
        margin-left: -8px;
        margin-top: -25px;
        margin-bottom: 100px;
        padding-bottom: 3px;
    }
    
    html
    { 
    background-color: #330033;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
    text-align: center;
    }
    
    .main_content
    {
     background-color: white;    
     margin-left: 200px;
     margin-right: 200px;    
    }
    
    nav
    {
        text-align: center;
        position: relative;
        padding-left:800px;
        bottom: 130px;
    }
    
    nav li 
    {
        display: inline;
        list-style: none;
        margin-left: 50px;
    }
    
    nav li a 
    {
        color: black;
        text-decoration: none;
    }
    
    a:active
    {
        color: yellow;
    }
    
    a:hover
    {
    color:  red;
    }
    
    
    footer
    {
        text-decoration: none;
        background-color: black;
        margin-right: -8px;
        margin-left: -8px;
        margin-top: 50px;
        padding-bottom: 50px;
    }


    -
    Edité par samyn-antoy 24 octobre 2018 à 21:01:05

    • Partager sur Facebook
    • Partager sur Twitter
    Windows et Linux sont les meilleurs OS pour un informaticien.
      16 octobre 2018 à 9:02:51

      Bonjour,

      Tu peux initialiser ton body en mettant le margin à 0.

      body{
        margin:0;
      }



      • Partager sur Facebook
      • Partager sur Twitter
        16 octobre 2018 à 9:17:10

        ok je vais essayer
        • Partager sur Facebook
        • Partager sur Twitter
        Windows et Linux sont les meilleurs OS pour un informaticien.
          16 octobre 2018 à 9:28:45 - Message modéré pour le motif suivant : La demande de l'équipe de modération a été honorée


          Pas d'aide concernant le code par MP, le forum est là pour ça :)

            16 octobre 2018 à 12:31:34

            Bonjour,

            A priori, ton soucis vient de margin-top et de padding-bottom. Si tu joues sur ces deux valeurs (mets 10px), tu modifiera la hauteur de footer. Tu pourrais aussi utiliser tout simplement height ou max-height afin de définir une hauteur fixe à ton footer.

            On voit de l'espace entre le texte et ton pied de page car tu as mis padding--bottom: 50px;

            -
            Edité par sffr49 16 octobre 2018 à 12:33:09

            • Partager sur Facebook
            • Partager sur Twitter
            Code is good !
              24 octobre 2018 à 15:27:28

              Merci pour votre aide sa a marcher :)
              • Partager sur Facebook
              • Partager sur Twitter
              Windows et Linux sont les meilleurs OS pour un informaticien.
                24 octobre 2018 à 17:50:58

                Mon message plus haut n'était pas là pour faire joli, merci d'en tenir compte.
                • Partager sur Facebook
                • Partager sur Twitter

                Pas d'aide concernant le code par MP, le forum est là pour ça :)

                  24 octobre 2018 à 21:01:30

                  C'est fais !
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Windows et Linux sont les meilleurs OS pour un informaticien.

                  [CSS] probleme de marge

                  × 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.
                  • Editeur
                  • Markdown