[Résolu] Dernier "Pratiquez" de la section 2 par Matmath05 - page 1

Bonjour DuyTran,

Merci pour ta réponse, j'ai déjà essayé cette solution qui me paraissait plus logique en effet, pourquoi utiliser FlexBox alors qu'on peut centrer les blocs avec "margin: auto".

Le problème est que cette solution ne marche pas, j'ai aussi essayé de mettre une balise div pour regrouper les p mais ça n'avait pas l'air de marcher, peut être ai-je fait une erreur par là...

Je met mon code html (dans lequel j'ai juste ajouté un bloc nav comme demandé dans l'exo 1...

Help! Help!

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

    <body>
      <nav>
      <div id="topsection">
        <header>
          <h1>Le blog trotter</h1>
          <p>Je parcours la planète... et vous la fais découvrir !</p>
        </header>
        
        <ul id="menu">
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Archives</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      </nav>

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

-
Edité par Matmath05 12 mai 2018 à 10:04:08

Matmath05

11 mai 2018 à 16:43:36

Bonjour,

Je suis bloqué sur le dernier point de l'exercice qui demande "Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page", je pense avoir testé pas mal de solution et le résultat marche, seulement le robot n'accepte pas ma réponse...

Donc "Au secours!"

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

#topsection
{
display: flex;
width: 80%;
}

p
{
display: flex;
flex-direction: column;
text-align: justify;
width: 80%;
margin: auto;
}

DuyT

11 mai 2018 à 17:29:53

Garde just ces 3

text-align: justify;
width: 80%;
margin: auto;

-
Edité par DuyT 11 mai 2018 à 17:30:22

12 mai 2018 à 10:02:36

13 mai 2018 à 13:55:47

     <nav>
        <ul id="menu">
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Archives</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
     </nav>

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

nav = navigation , il ne contient que les liens navigations

13 mai 2018 à 19:09:50

Ah oui donc il y avait une erreur à l'exo 1 et c'est l'exo 4 qui ne passait pas... Je pouvais rester longtemps comme ça!

Merci pour ton aide!

Dernier "Pratiquez" de la section 2

Dernier "Pratiquez" de la section 2

Supprimer

Modérer

Signaler le message aux modérateurs