Cours HTML/CSS - Flexbox

centrer les bloc - validation exercice.

21 avril 2019 à 20:54:45

Bonjour à tous,

Tout d'abord merci pour l'aide apporté.

Je suis au chapitre 3 du cours "Apprenez à créer votre site web avec HTML5 et CSS3".

J’essaie de valider l'exercice pratique du chapitre, mais je bloque sur la partie centrer les paragraphes avec display flex.

L'attendu est : Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page.

J'ai appliqué toutes les propositions trouvées sur le forum, mais aucune ne valide l'exercice.

Si je place un margin : auto sur mon bloc, j'ai le résultat attendu mais la validation de l'exercice ne se fait pas.

Merci par avance pour l'aide apportée.

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>

     
<div class="conteneur">

      <h1>La Chine</h1>

<div class="content">

<p>Bla bla bla bla </p>

</div>

<div class="content">
      
<p>Bla bla bla bla</p>

</div>
      
      <h1>L'Espagne</h1>

<div class="content">
      
<p>Bla bla bla bla </p>

</div>

<div class="content">

      <p>Bla bla bla bla</p>
</div>
      
</div> 
      <footer>
        <p>Copyright Le Blog Trotter</p>
      </footer>
        
    </body>
</html>

et voici le CSS :

li
{
  list-style: none;
}
#topsection
{
  display:flex;
  justify-content: space-around;
}
.conteneur
{
display: flex;
flex-direction: column;
align-items:center;
justify-content: center;
width: 80%;
text-align:justify;
}

.content{
  height:100%;
  width:80%;
  border:solid 1px red;
}

Mewen_bzh

23 avril 2019 à 8:59:11

Bonjour,

Il est normal que l'exercice ne soit pas validé car tu ne fais pas ce qui est demandé.

Tu dois afficher les paragraphes en justifié, sur 80% de largeur et les centrer sur la page. Toi tu rajoutes des balises HTML et tu appliques des propriétés CSS dessus (propriétés qui ne sont de plus pas utiles).

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

thawy

23 avril 2019 à 12:25:12

Bonjour,

Merci pour ta réponse.

J'ai supprimé les DIV et utilisé le margin: auto;

Exercice validé !

Cependant, j'aurais une question :

Le cours sur flexbox laisse à penser que l'objectif de cette classe est de mettre en page plus facilement notamment centrer les blocks.

Du coup, j'ai pensé que l'exercice consistait à appliquer un display flex et à centrer via align-content et justify-content.

Pourquoi flexbox ne peut pas être utilisé pour réaliser ce type de mise en page ?

Merci par avance

NicolasMarafetti

23 avril 2019 à 19:18:09

Bonjour Thawy,

Tu as tout à fait raison : la propriété flex permet de mettre en page plus facilement.

En effet, dans l'exemple du cours, tu as réussi à très simplement aligner les classes "content" au milieu en utilisant quelques propriétés css : le flex, le flex-direction et enfin align-items.

Pour ce qui est du margin: auto sur le conteneur principale, c'est en effet la meilleure solution. Le flex n'est pas à utilisé absolument partout, si tu débutes prend le temps de te poser la question et avec la pratique tu prendras la décision rapidement de savoir si pour tel cas le flex est la bonne solution.

exen

23 avril 2019 à 19:35:37

Bonjour,

Pour répondre simplement à ta question ce n'est pas qu'il ne peut pas être utilisé en général pour ce type de mise en page.

C'est juste dans cet exercice le script demande une réponse précise vis-à-vis de la consigne.

Compos sui.

thawy

23 avril 2019 à 20:35:45

Bonjour à tous,

Je vous remercie pour vos réponses, j'y vois plus clair.

GuillaumeSbl

6 août 2019 à 16:20:10

Bonjour,

je suis bloqué sur ce meme exercice, je ne vois pas ce qui cloche.

Voici mon CSS.

/* Feuille de style */

#topsection

{

width:50%;

display: flex;

margin: auto;

}

#menu

{

list-style: none;

}

{

text-align: justify;

width: 80%;

margin: auto;

}

L'étape qui bloque est : Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page

Je suis preneur de vos tuyaux.

Merci

Guillaume

exen

6 août 2019 à 16:33:54

bonjour,

ce qui cloche c'est que tu ne te sois pas fait ton propre post pour poser cette question, ca permetrais de mieux te répondre et aussi d'eviter le melange des genres dans les questions.

Compos sui.

GuillaumeSbl

6 août 2019 à 16:34:23

Je vais rectifier de suite.