Partage
  • Partager sur Facebook
  • Partager sur Twitter

Placez le header et le menu côte à côte

apprenez-a-creer-votre-site-web-avec-html5-et-css3

Sujet résolu
    30 janvier 2020 à 16:35:38

    Bonjour, 

    je suis a la section 3, dans la partie pratiquez du cours. Et je ne comprends pas pourquoi j'ai une réponse fausse sur 'Placez le header et le menu côte à côte'

    Ci dessous le fichier index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="style.css" />
            <title>Le blog trotter</title>
        </head>
    
        <body>
          <div id="topsection">
            <header>
              <h1>Le blog trotter</h1>
              <p>Je parcours la planète... et vous la fais découvrir !</p>
            </header>
            
            <nav>
              <ul id="menu">
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Archives</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
          </div>
            
          <section>
            <h1>La Chine</h1>
            <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
    
            <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
          
            <h1>L'Espagne</h1>
            <p>Bla bla bla bla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla hendrerit mauris a ornare. Nam finibus ante id lacinia placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec metus mauris, imperdiet eget tincidunt rhoncus, venenatis id risus. Proin at est eu nibh faucibus faucibus non in magna. Ut iaculis quam nisi, eu efficitur justo eleifend lobortis. Etiam purus metus, feugiat non enim et, egestas volutpat lacus. Aenean id justo arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
    
            <p>Phasellus dictum aliquam euismod. Donec orci augue, efficitur non nunc vel, tincidunt mattis nibh. Suspendisse ac ligula non mauris semper fermentum ut eget dui. Aliquam erat volutpat. Curabitur vulputate, nulla quis rhoncus volutpat, eros risus hendrerit massa, at suscipit tortor magna at diam. Phasellus tincidunt massa libero, id bibendum dui dapibus sed. Etiam nec risus eget nisl posuere ultrices. Ut sodales ante eget leo luctus molestie. Aenean vel urna in turpis rhoncus scelerisque. Etiam in nisi sapien.</p>
          </section>
            
          <footer>
            <p>Copyright Le Blog Trotter</p>
          </footer>
            
        </body>
    </html>
    


    Ci dessous le fichier style.css

    /* Feuille de style */
    ul
    {
      list-style: none;
    }
    
    header
    {
      width: 50%;
      color: red;
      background-color: black;
    }
    
    nav
    {
      width: 50%;
      background-color: yellow;
    }
    
    #topsection
    {
      Display: flex;
      justify-content: space-around;
    }
    
    section, p
    {
      text-align: justify;
      width: 80%;
      margin: auto;
    }
    

    Le résultat obtenu:

    • Partager sur Facebook
    • Partager sur Twitter
      30 janvier 2020 à 16:43:53

      Bonjour,

      A tout hasard, as-tu essayé sans le "d" majuscule à "display" (ligne 22) ?

      • Partager sur Facebook
      • Partager sur Twitter
        30 janvier 2020 à 16:50:47

        Merci beaucoup.... Ça fonctionne.
        • Partager sur Facebook
        • Partager sur Twitter

        Placez le header et le menu côte à côte

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