Erreur cas pratique 3 HTML&CSS par M. Nebra ?

Je rencontre des difficultés pour la dernière instruction

14 juin 2018 à 16:33:51

Bonjour,

Je rencontre un petit souci lorsque je tente de faire mon cas pratique n°3 sur le cours ci-joint : lien.

En effet lorsque je tente de vérifier la dernière instruction, le bot ne me valide pas mon travail. Voici l'instruction:

"Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page", j'ai beau remanier mon code CSS, je ne comprends pas d'où provient l'erreur.

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

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

Et voici mon code CSS:

/* Feuille de style */

#menu
{
	list-style-type: none;
}

#topsection
{
  display: flex;
  justify-content: center;
  width: 80%;
    
}

p
{
 display: flex;
 flex-direction: row;
 text-align: justify; /* justifie le texte du paragraphe */
 width: 80%;
 margin: auto; /* centre les blocs "p" sur la page */
}

La partie qui est problématique concerne les "p".

Quelqu'un saurait me clarifier pourquoi le bot ne peut me confirmer mes lignes ?

J'ai la réponse : "Failed: centered and justified paragraphs".

Sur mon aperçu pourtant, les paragraphes semblent justifiés, et centrés (alors que les h1 ne le sont pas, volontairement.)

voici une copie d'écran:

Merci par avance de votre aide pour mieux comprendre ce que je ne dois pas faire correctement haha

Baptiste

edit: j'ai même tenté en rajoutant la ligne ci-dessous, en vain :

justify-content: center;

-
Edité par BaptisteNohluga 14 juin 2018 à 16:56:04

philiga

14 juin 2018 à 18:22:49

Bonsoir,

Ligne 19 de ton CSS, tu as un élément html: <br> qui n'a rien à faire dans le CSS.

C'est sûrement le coupable...

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

BaptisteNohluga

14 juin 2018 à 19:11:07

Salut !

Ah il n'est pas sur la page que j'ai.

Il' s'agit d'un problème lorsque j'ai édité mon code ici.

Mon code CSS est bien le suivant:

/* Feuille de style */
 
#menu
{
    list-style-type: none;
}
 
#topsection
{
  display: flex;
  justify-content: center;
  width: 80%;
     
}
 
p
{
 display: flex;
 flex-direction: row;
 text-align: justify; /* justifie le texte du paragraphe */
 width: 80%;
 margin: auto; /* centre les blocs "p" sur la page */
}

En réessayant à l'instant, cela ne marche toujours pas. J'ai une boulette sous les yeux et je ne la vois pas. C'est pas très rassurant haha.

Quelqu'un à un point de vue là dessus?

-
Edité par BaptisteNohluga 14 juin 2018 à 19:15:19

philiga

14 juin 2018 à 21:45:55

On doit être deux à être aveugles alors, ou c'est ce foutu système de robot correcteur (que je découvre juste);

apparemment, il buggue :

il bloque aussi sur le list-style-type: none; quand je teste alors que c'est la bonne instruction sur la bonne cible (testé aussi sur ul, ul li, ul#menu, ul#menu li: pas mieux... je ne sais pas ce qu'il lui faut à ce foutu robot!)

Tes trois dernières lignes me semblent aussi correctes ; par contre les 18 & 19 ci-dessus (display:flex;) sont en trop.

Appel aux roboticiens pour réparer la bécane...!

Si c'est tout le temps comme ça, tout le long des cours, vive la pédagogie automatisée !

Pour faire déprimer et rendre les gens fous, ça doit être efficace !

-
Edité par philiga 14 juin 2018 à 21:46:30

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Lucky13

14 juin 2018 à 22:48:16

Hello,

Pour moi seul la 4ème demande ne marche pas.

Et ce n'est pas la première que le système ne détecte rien ou plante, il y a déjà eu plusieurs sujets sur ce point. Le mieux est d'attendre et recommencer plus tard, ce qui doit être évidemment très frustrant comme un coup d'arrêt

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

BaptisteNohluga

15 juin 2018 à 0:53:10

Franchement ça commence un peu a m'énerver...

ça pour les cas pratique et l'exercice qui n'a pas été corrigé par le 3eme étudiant et qui m’empêche de valider le module alors que les 2 autres m'ont donné des notes.

Je suis franchement déçu de la tournure que ça prends. Moi qui pensais prendre un abonnement je me retournerai auprès d'un autre service...

philiga

15 juin 2018 à 9:14:54

Tu as le droit d'être déçu en effet, c'est légitime.

Toute lourdeur, lenteur, rigidité d'un tel système pourrait être tolérée, mais qu'il trouve obstinément des erreurs là où il n'y en a pas, c'est insupportable, vexatoire, schizophrénogène et épuisant nerveusement pour l'élève dont toute la logique, le bon sens intérieur en sont meurtris.

Il faudrait au moins qu'il y ait un bouton d'appel à l'explication/intervention rapide d'un humain capable de voir le problème et rassurer et débloquer l'élève.

Sans cela ce système est la pire, la plus antipédagogique, pour ne pas dire la plus perverse des méthodes d'enseignement.

Je signale ce fil pour remonter l'info aux humains au sommet de ce système (-s'il y en a encore?-) et avoir leur réponse à ce problème essentiel...

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Lucky13

15 juin 2018 à 11:30:55

philiga, je pense que tu as compris depuis longtemps qu'ils visent plus haut, les parcours diplômants à 300€ + mentoring est leur fer de lance façe à la concurrence.

Le reste me semble de la poudre aux yeux, laisser penser que le Premium 20€ suffit à exercer ce métier ? C'est déjà bien et peut-être financé, mais on peut suivre les cours librement...

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

philiga

15 juin 2018 à 13:05:46

@Lucky13: Je t'avoue que je ne connais pas les tarifs des options payantes sur ce site ; je ne m'y suis jamais intéressé.

Par ailleurs, je ne fais pas de procès d'intention aux responsables de ce site, et les tarifs que tu indiques semblent raisonnables.

Il n'y a en outre aucun mal en soi à gagner de l'argent si on le fait équitablement contre services rendus. Et 300€ si on a réellement accès à un humain compétent et disponible sur plusieurs semaines, ce n'est vraiment pas cher.

Par contre, 20€ ou même la gratuité pour un robot qui rend fou, c'est une terrible violence faite à tous ceux qui peuvent se casser la tête des nuits entières et déprimer devant cette absurdité qui a de quoi décourager un projet professionnel et au-delà même la personne derrière ce projet.

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Lucky13

15 juin 2018 à 18:57:16

Oui tout à fais, c'est ce que j'ai dit et on ferai de même, néanmoins vu les priorités ce problème de robots est récurent et ne semble pas être un e priorité (dsl pour le répétition)

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS