Partage

Exercice du cours HTML5 et CSS3

Flexbox

12 novembre 2017 à 10:55:20

Bonjour à tous !

Je suis bloquée à un des exercices du cours HTML et CSS. Je suis à la partie qui explique Flexbox. Les dernières consignes demandées dans le travail sont les suivantes :

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

* Afficher les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page.

J'obtiens ce qui est demandé mais il me met que "ce n'est pas ça". 

Voici mon code HTML : 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" />

        <title>Le blog trotter</title>

    </head>

    <body>

      <div id="top">

        <div class="top">

        <header>

          <h1>Le blog trotter</h1>

          <p>Je parcours la planète... et vous la fais découvrir !</p>

        </header>

        </div>

        <div class="topmenu">

          <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>

        <div class="corps"> 

          <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>

      </div>

      <div class="pied">

        <footer>

          <p>Copyright Le Blog Trotter</p>

      </footer>

        </div>

      </div>

  </body>

</html>

Et mon code CSS:

/* Enlever les puces*/

ul

{

list-style-type: none;

}

/* Mettre le header et le menu cote à cote*/

#top

{

  display: flex;

  justify-content: center;

  flex-wrap: wrap;  

}

p

{

  text-align: justify;

  padding: 10%;

}

Pouvez vous m'aider svp ? Soyez indulgents, je suis débutante :) A mon avis, c'est tout bête... J'ai beau relire le cours et faire comme indiqué dans la théorie, je bloque.

Merci :)

12 novembre 2017 à 15:16:20

Je suis justement en train de faire cet exercice pour le moment (d'ailleurs, merci pour la liste à puce, je n'avais pas trouvé comment faire. :P)

 - Pour aligner header et nav : dans le code de base, tu as déjà un id topsection. Il te suffit, dans le code css, de mettre :

#topsection
{
 display:flex;
}

(Dans ton code, tu as id="top" et class= "top" en double. Tu n'avais en fait pas besoin de toucher au code html.)


- pour les paragraphes : il suffit d'utiliser width et 80% (rappel : il faut utiliser ":" et pas "=". J'ai tourné en rond 10 minutes à cause de ça, hi hi.) Je te laisse trouver le code exact, tu vas voir, il est très simple.

-
Edité par Grenade90 12 novembre 2017 à 15:17:54

13 novembre 2017 à 15:47:45

Super merci beaucoup, problème ENFIN résolu :) !
15 novembre 2017 à 4:11:41

Bonjour, vous pouvez me dire comment vous avez pu:

-centrer l'image et sa description ?

-et le code pour mettre une bordure autour de la liste à puces svp ( ici  j'ai essayé : 

ul

{

 border: 2px solid black 

}

mais ça n'a pas marché :((

dans l'exercice de la 2 semaine 

merci bcp 

Exercice du cours HTML5 et CSS3

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