Cours HTML et CSS - Pratiquez n°3 - pb centrage

Sujet résolu

5 décembre 2017 à 15:15:39

Bonjour,

Sur "Pratiquez !" n°3 du cours débutant, je n'arrive pas à centrer mes paragraphes comme demandé :

"Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page"

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

Le CSS

ul 
{ 
  list-style-type: none; 
}

#topsection, menu
{
  display: flex;
}

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

.p
{
	display: flex;
	justify-content : center;
}

noopy360

5 décembre 2017 à 15:27:01

Salut pour ton paragraphe

ajoute dans ton CSS à la balise p, margin:0 auto;

Après je n'aurais pas coder comme ca ta page...

-
Edité par noopy360 5 décembre 2017 à 15:29:41

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

GuillaumeBo1

5 décembre 2017 à 15:34:17

pourquoi .p ? tu n'as pas de class="p"!

et menu d'ou il sort tu n'a pas de balise <menu> ?!?

Revois le cours sur le CSS et flexbox puis refais tout ton fichier CSS.

noopy360 a écrit:

Salut pour ton paragraphe

ajoute dans ton CSS à la balise p, margin:0 auto;

Après je n'aurais pas coder comme ca ta page...

-
Edité par noopy360 il y a 4 minutes

s'il fait du flexbox il n'a pas besoin de margin:auto; et le 0 est inutile.

-
Edité par GuillaumeBo1 5 décembre 2017 à 15:39:17

Un homme azerty en vaut deux.

noopy360

5 décembre 2017 à 15:40:47

Alors en soit je suis d'accord avec toi GuillaimeBo1, mais ça page est mal structurer donc je me contente de lui donner une réponse qui va fonctionner sur le code actuel après je peut refaire tout sont code mais ça ne va répondre à ça question de base...

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

GuillaumeBo1

5 décembre 2017 à 15:47:00

La meilleure réponse c'est :

Recommence tout en suivant chaque étape du cours.

En gros la balise <header> représente déjà le haut de ta page pas besoin de la mettre dans une div.

Ton CSS comment dire la moitié pointe sur des éléments qui n'existent pas dans ton HTML.

Bon tu peux garder ta balise <head> mais tout ce qui a dans le <body> est a réorganiser.

-
Edité par GuillaumeBo1 5 décembre 2017 à 15:52:11

Un homme azerty en vaut deux.

MissGriotte

6 décembre 2017 à 15:00:24

Je précise que ce n'est pas moi qui est créée le fichier HTML, il était déjà fournis pour l'exercice, j'ai juste ajouté la balise <nav> </nav>

L'exo complet :

1 > Une balise sémantique "nav" manque. Pouvez-vous l'ajouter au bon endroit ?

2 > Retirez les puces de la liste à puces (à vous de trouver comment faire !)

3 > Placez le header et le menu côte à côte

4 > Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page

GuillaumeBo1 a écrit:

pourquoi .p ? tu n'as pas de class="p"! Je voulais dire que j'utilise les blocs mais je crois que je n'ai pas du trop capté ce cours :/

et menu d'ou il sort tu n'a pas de balise <menu> ?!? <ul id="menu">, il manque le #, je pense

Revois le cours sur le CSS et flexbox puis refais tout ton fichier CSS. Je vais faire ça

noopy360 a écrit:

Salut pour ton paragraphe

ajoute dans ton CSS à la balise p, margin:0 auto;

Après je n'aurais pas coder comme ca ta page...

-
Edité par noopy360 il y a 4 minutes

s'il fait du flexbox il n'a pas besoin de margin:auto; et le 0 est inutile.

-
Edité par GuillaumeBo1 il y a environ 23 heures

@jout :

noopy360 a écrit:

Salut pour ton paragraphe

ajoute dans ton CSS à la balise p, margin:0 auto;

Après je n'aurais pas coder comme ca ta page...

-
Edité par noopy360 il y a environ 23 heures

Merci c'était bien ça
Voici le bon codage CSS :
ul 
{ 
  list-style-type: none; 
}

#topsection, menu
{
  display: flex;
}

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

-
Edité par MissGriotte 6 décembre 2017 à 15:38:50