[Résolu] [CSS] Cours partie 3 pratique flexblox . par TotoxXme - page 1

Bonjour , bonsoir .

Je me tourne vers vous dans l'espoir de comprendre se que je ne comprend pas , je suis face a un blocage est je n'arrive pas a en sortir .

se qui demander de faire

j'arrive a tout exécuter sauf le fameux centrage que je n'arrive pas a exécuté et a définir ça vas faire des semaine que je bloc sur ça alors que j'ai le sentiment que c'est tout simple , voici mon dernier essai en date .

<!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="texte">
      <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>
      </div>
      <footer>
        <p>Copyright Le Blog Trotter</p>
      </footer>
        
    </body>
</html>

Et mon code CSS .

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

#topsection{
  display: flex;
}
p{
width: 80%;
text-align: justify;
}

.texte{
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 1080px;
}

Et se que me Codey que je ne comprend pas .

Je présice que je ne m'adresse pas a vous pour qu'on me donne la solution au cours mais surtout a se qu'on m'explique se que je semble ne pas comprendre , ça me rend fou je vous jure de buté sur quelque chose qui me semble aussi simple , je vous remerci tous d'avance pour l'aide et les explication que vous pourrez me fournir meris =) .

-
Edité par TotoxXme 14 décembre 2017 à 17:10:55

TotoxXme

14 décembre 2017 à 17:10:00

noopy360

14 décembre 2017 à 18:06:59

Salut tu n'a pas centre le block de paragraphe.

p{
   text-align:justify; /* justifié */
   width:80%; /* 80% de largeur */
   margin:auto; /* centrez leurs blocs */
}

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

14 décembre 2017 à 18:43:46

Purée merci =) , j'était perché a des année lumière de ça , j'avais pas essayez le margin: auto; directement la dessus convaincu qu'il fallait que je crée des bloc ..... Merci beaucoup =))))))))) tu sauve une âme perdu x) .

[CSS] Cours partie 3 pratique flexblox .

[CSS] Cours partie 3 pratique flexblox .

Supprimer

Modérer

Signaler le message aux modérateurs