Exercice "Pratiquez 3" HTML5 et CSS3

Sujet résolu

LargoWinch7

11 février 2020 à 14:51:33

Bonjour,

Je n'arrive pas à résoudre l'exercice "Pratiquez 3"

Je pense fait ce qui est demandé mais le bot ne réagit pas et répond systématiquement que ma réponse est fausse.

Est ce que quelqu'un aurait un screenshot de son code juste svp ?

Mewen_bzh

11 février 2020 à 14:55:08

Bonjour,

Si le bot rejette ta réponse alors il est possible que ta réponse soit tout simplement erronnée.

Commence par nous montrer tes coes HTML et CSS à l'aide de l'outil "</>" du forum (pas de screenshots du code).

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

LargoWinch7

11 février 2020 à 15:04:51

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Le blog trotter</title>
    </head>

    <body>
      <div id="topsection">
        <div class=element id="element1" >
        <header>
          <h1>Le blog trotter</h1>
          <p>Je parcours la planète... et vous la fais découvrir !</p>
        </header>
        </div>
        <div class=element id="element2">
        <nav>
          <p>Element</p>
          
        </nav>
        </div>
        <ul class=element id="menu">
          
        </ul>
      </div>
         
       
      <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>
        
              <footer>
        <p>Copyright Le Blog Trotter</p>
      </footer>
        
    </body>
</html>

Ca c'est l'HTML

#element1
{
  background-color:blue
}

#element2
{
  background-color:red;
}
#menu
{
  background-color:green;
}

.element
{
  width:50%;
  height:200px;

}

#menu{
  list-style-type: none;
}
 
#topsection{
  display: flex;
}
 
p{
  text-align: justify;
  width: 80%;
  margin: 0px auto;
}

Et le CSS.

Mewen_bzh

11 février 2020 à 15:17:00

Effectivement, beaucoup d'erreurs en vue. Je te conseille vraiment de recommencer l'exercice du début et de reprendre les choses une à une.

A part la balise nav (que tu n'as pas placé au bon endroit), il n'y a rien à ajouter dans le HTML.

p{
  //Le reste est bon
  margin: 0px auto;
}

Ici il y a un souci. Il est demandé de centrer les p dans la page.

En mettant la valeur de margin à 0 auto, tu ne centres pas les p dans la page. Tu ne fais que centrer les p horizontalement dans la page, ce n'est pas la même chose.

EDIT : après vérification, le bot accepte aussi le '0 auto'. Le problème vient donc seulement de tout ce que tu as ajouté et qui n'était pas demandé.

-
Edité par Mewen_bzh 11 février 2020 à 15:22:37

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

LargoWinch7

11 février 2020 à 15:26:36

Bon merci pour ton aide on a tout recommencé du début et c'est Ok

-
Edité par LargoWinch7 11 février 2020 à 15:32:59