Bonjour,

Je suis en train de suivre le MOOC "Apprenez à créer votre site web avec HTML5/CSS3" et dans la section "pratiquez" qui suit l'initiation à flexbox je n'arrive pas à voir mon erreur : (ici : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/4214576-pratiquez)

Déjà, s'il y a quelque part le corrigé de cet exercice je veux bien le lien s'il vous plait...

Sinon voici le code HTML que j'ai proposé :

<!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 class="paragraphes">
      <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>

et le CSS correspondant :

/* Feuille de style */

ul
{
  list-style-type:none;
}

#topsection
{
  display:flex;
}

p
{
  width:80%;
  text-align:justify;
}

.paragraphes
{
  display:flex;
  flex-direction:column;
  align-items:center;
}

l'instruction est : "Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page"

Et il me semble que c'est le cas non : https://included-bowfin-n4oc-8080.nt.run/ ? pourtant le bot me dit que ce n'est pas ça et je ne comprends pas le message de check

Merci

Mewen_bzh

11 février 2020 à 8:55:23

Bonjour,

Il est normal que l'exercice ne se valide pas.

La question est "Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page".

Si je reprends ton code, tu as indiqué dans ton CSS :

p
{
  width:80%;
  text-align:justify;
}

Donc :

"Affichez les paragraphes en justifié" : ça c'est ok (grâce à text-align:justify)

" sur 80% de largeur" : c'est bon aussi (grâce à width:80%)

"centrez leurs blocs sur la page" : ça par contre ce n'est pas fait.

Je ne réponds pas aux messages privés.

Sébastien Delile

11 février 2020 à 9:54:20

Super, merci de ta réponse !

Pour le centrage je n'avais pas réussi à le faire via une instruction dans le block p, c'est pour ça que j'ai ajouté un surblock (class="paragraphes" dans mon code) et que j'y ai mis les instructions de centrage (display:flex , flex-direction:column et align-items:center). Et ça fonctionne, dans le résultat les paragraphe (ainsi que les titres) sont centrés sur la page.

Mais visiblement ce n'est pas la réponse attendu par l'exercice. Je vais voir si je trouve une façon de mettre cette instruction directement dans le block p

Merci en tout cas de ta réponse et du temps passé sur mon cas

Mewen_bzh

11 février 2020 à 10:01:15

Oui il faut bien respecter les consignes (qui ne sont pas toujours très précises).

A la question 1 par exemple ("Une balise sémantique "nav" manque. Pouvez-vous l'ajouter au bon endroit ?") il faut effectivement ajouter une balise.

Mais quand ce n'est pas précisé il faut effectivement le faire en CSS uniquement sans toucher au code HTML.

Pour la question qui te bloque, tu trouveras la réponse dans le chapitre du cours sur les marges et les paddings : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606168-decouvrez-le-modele-des-boites

Je ne réponds pas aux messages privés.

Sébastien Delile

11 février 2020 à 10:08:43

Ahah effectivement il y avait plus simple... je me suis laissé induire en erreur en focalisant sur les flexbox qui venaient d'être abordées...

Merci bcp pour ta réponse

LargoWinch7

11 février 2020 à 14:28:58 - Message modéré pour le motif suivant : Message complètement hors sujet

Benzouye

11 février 2020 à 14:45:52

Bonjour,

Hors sujet

Ton message est hors sujet. Afin de garder un forum clair où chaque fil de discussion répond à une problématique, il est nécessaire de ne pas multiplier les sujets à l'intérieur du même fil de discussion. Merci de créer ton propre sujet à l'aide du bouton bleu « Créer un sujet » en haut à droite du forum adéquat.

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Forums des Zéros

Cours initiation HTML/CSS exercice CSS flexbox

Hors sujet

Cours initiation HTML/CSS exercice CSS flexbox

Hors sujet

Supprimer

Modérer

Signaler le message aux modérateurs