[Flexbox] Pratiquez-5

Alignement des paragraphes

4 mai 2018 à 15:52:12

Bonjour,

Tout d'abord j’espère ne pas me tromper d'endroit pour le post (je pensais trouver du monde poser des questions par rapport à l'activité n°5 'Pratiquez, effectuez la mise en page' avec Flexbox), si oui je m'en excuse.

Voilà, après avoir passez pas mal de temps je pense avoir réussis la dernière tâche de l'exercice (soit 'Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page') mais le robot n'est pas de cet avis..

Pour moi les blocs <p> sont bien centrés sur la page:

l'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="par">
      <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>
      </div>
        
    </body>
</html>

CSS:

/* Feuille de style */
#menu{
  list-style:none;
}
#topsection{
  border: 5px red solid;
  display: flex;
}
header{
/*   background-color: orange; */
  flex:1;
}
nav{
/*   background-color: yellow; */
}
.par{
/*   border: 1px red solid; */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
p{
  background-color: purple;
  color: white;
  width:80%;
  text-align:justify;
}
.par h1:nth-child(1){
  background-color: yellow;
}
.par h1:nth-child(4){
  background-color: red;
}

Si un ange gardiens passe, je le remercie beaucoup beaucoup! :D

Mathieu

Zoki_Marciano

4 mai 2018 à 21:48:39

Le <p> dans header n'est pas centré.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

MathieuNv

5 mai 2018 à 13:18:54

Bonjour!

Merci beaucoup de ta réponse :D

C'est vrai que j'ai interprété la consigne en excluant le premier paragraphe car (c'est sûrement à ce point que ma maîtrise de Flexbox me fait défaut) je n'ai pas idée de comment centrer un bloc sans les agencer en 'column', soit ce résultat: (toujours refusé par codey le robot)

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 class="element">
          <h1>Le blog trotter</h1>
          <p>Je parcours la planète... et vous la fais découvrir !</p>
        </header>
         
        <nav class="element">
          <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="par">
      <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>
      </div>
         
    </body>
</html>

CSS:

/* Feuille de style */
#menu{
    list-style:none;
}
#topsection{
    display:flex;
    flex-direction:column; 
    background-color: grey;
    align-items: center;
}
.element:nth-child(1){
    flex: 1;
    background-color:pink;
}
#topsection header p{
    border: 4px brown solid;
    margin-left: auto;
    margin-right: auto;
}
p{
    text-align:justify;
    width:80%;
}
.par{
    display:flex;
    flex-direction:column;
    align-items:center;
}

Je me dit que je pourrais passer à la suite mais je me sens pas à l'aise avec cette étape importante du cours..

Encore merci pour votre aide ! :D

-
Edité par MathieuNv 5 mai 2018 à 13:19:24

Zoki_Marciano

5 mai 2018 à 15:04:17

Le logiciel dis que les puces sont là même quand elles ne le sont plus! Je viens de faire toute les consignes tout est comme il faut et rien est bon selon cody... Te prend pas la tête passe à autre chose tu reviendras dessus plus tard si tu l'estimes utile !

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

MathieuNv

14 mai 2018 à 17:17:59

D'acc, merci pour ton temps et ton aide! :)