Partage

htm 3l / css5 pratiquer n°3

Sujet résolu

16 juillet 2018 à 10:42:38

Bonjour a tous voilà dans l'exercice pratiquer n° 3 ou on demande de mette la balise <nav> enlever les puce placer le header a coter du menu

et Affichez les paragraphes en justifié, sur 80% de largeur et centrez leurs blocs sur la page : j'arrive les 3 premiers mais la dernière rubrique je ne comprends pas est ce que quelqu'un peu m'indiquer éventuellement si il me manque quelque chose? ou si j'ai fait une erreur ?

J'essaie de vous mettre mon code :

<pre class="brush: c;">

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; }</pre>

j'attends vos réponses ou aide avec plaisir

bonne journée a tous

Hsuissia

16 juillet 2018 à 11:01:08

Bonjour,

Pour mettre du code tu dois soit utiliser le bouton </> et copier/coller ton code dans la zone de texte proposer
Soit passer en mode HTML en bas a gauche de cette zone de saisie et la tu peux mettre la balise <pre>

#menu {
    list-style-type: none;
}
 
#topsection{
    display: flex;
}

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

---

Peut-on avoir le code HTML que tu as fais, en lien avec ce code CSS ? ( Le fait que la balise p soit a 80% m'intrigue^^ )
Et nous dire exactement sur quel point tu bloques car je n'ai pas su identifier les points réussis et les points en cours^^

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

AlexandrineJoubert

16 juillet 2018 à 12:42:28


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

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

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

Merci pour le coup de pouce pour enserrer le code j’espère que ça va fonctionner cette fois ;-)

recap :
j'ai réussi a mettre la balise <nav>

j'ai réussi a enlever les puces de la liste (css)

j'ai réussi a mettre le header et le menu cote a cote

mais sur le 4 éme point je sèche : le fait d' Affichez les paragraphes en justifié, sur 80% de largeur ( c'est ce que j'ai mis avec la balise p 80% mais c'est peut être pas bon ?) et centrez leurs blocs sur la page

Hsuissia

16 juillet 2018 à 14:01:14

C'est plutot pas mal. Du coup le seul truc qui te manque c'est l'alignement centrer des <p>. Pour ça tu as un truc tout bête qui est de mettre le margin en auto sur le left et right.

margin: 0 auto;

Ici je précise que pour les margin, le top et bot seront a 0, et le left-right en auto, et tu verras tes paragraphes centré

Sinon tu peux jouer avec les flexbox et définir une div container, et tes éléments en column 1 et centrer^^

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

AbcAbc6

16 juillet 2018 à 15:39:41

Bonjour, de mémoire pour cet exercice tu ne peux modifier le HTML, jute le CSS.

Tu as des soucis dans ton html, vérifie les erreurs de syntaxe en passant ton code au validateur https://validator.w3.org/

Un identifient est unique dans le document, tu ne peux avoir plusieurs id="header"

La balise <ul> comme la balise <ol> n'accepte comme enfant direct uniquement la balise <li>, tu ne peux donc avoir des sections à cet endroit. Réfléchi à comment tu pourrais enlever les puces en CSS.

AlexandrineJoubert

16 juillet 2018 à 16:02:20

AlexandrineJoubert a écrit:

J'ai un petit hic quand je rajoute
margin: 0 auto;
et que je fait vérifier ba ça me dis que c'est encore pas ça alors j'ai enlever le code pour mon bloc text pour essayer mais rien n'y fais rien non plus

code css sans le container text
/* Feuille de style */
#topsection
{
  display : flex;
  justify-content : center;
}
#menu{
  list-style-type: none;
  }
#p
{
  width :80%;
 text-align: justify;
  margin: 0 auto;
}
après je veux bien utiliser les flexbox mais j'ai du rater encore un petit truc car j'avoue j'ai pas tout compris pour les utiliser

J'ai un petit hic quand je rajoute

margin: 0 auto;

et que je fait vérifier ba ça me dis que c'est encore pas ça alors j'ai enlever le code pour mon bloc text pour essayer mais rien n'y fais rien non plus

code css sans le container text

/* Feuille de style */
#topsection
{
  display : flex;
  justify-content : center;
}
#menu{
  list-style-type: none;
  }
#p
{
  width :80%;
 text-align: justify;
  margin: 0 auto;
}

après je veux bien utiliser les flexbox mais j'ai du rater encore un petit truc car j'avoue j'ai pas tout compris pour les utiliser

AbcAbc6 a écrit:

Bonjour, de mémoire pour cet exercice tu ne peux modifier le HTML, jute le CSS.

Tu as des soucis dans ton html, vérifie les erreurs de syntaxe en passant ton code au validateur https://validator.w3.org/

Un identifient est unique dans le document, tu ne peux avoir plusieurs id="header"

La balise <ul> comme la balise <ol> n'accepte comme enfant direct uniquement la balise <li>, tu ne peux donc avoir des sections à cet endroit. Réfléchi à comment tu pourrais enlever les puces en CSS.

Bonjour

sur le fait qu'on ne peut pas modifier le fichier html j'ai des doute car il faut qu'on rajoute la balise nav

en ce qui concerne la vérification du code grâce au lien que vous m'avez donner il me ressortait l'erreur pour le nav (pas a la bonne place et je l'ai corriger) et l'autre chose qu'il me ressort c'est la balise du HTML je comprends pas pour quoi vu que ça je ne l'ai pas touché ;-)

concernant les id je les ai laissé tel quel et je n'en ai pas rajouter non plus faut-il que je rajoute 1 ?

-
Edité par AlexandrineJoubert 16 juillet 2018 à 16:12:14

Hsuissia

16 juillet 2018 à 16:35:11

Normalement, du souvenir de l'exercice, niveau HTML tu n'as que le nav a placer, le reste se fait en CSS, donc rien d'autre a toucher niveau HTML.( Sauf si tu veux faire un peu de flexbox pour les paragraphes^^ )

Je te conseil de repartir d'un HTML propre car comme annoncé par AbcAbc6 ( et je n'avais pas fais attention ) mais ton HTML est plein d'erreur^^
Je suis de la vieille donc a l'époque on envoyait un fichier HTML/CSS par drop, maintenant avec leur console de dev, je ne sais si tu peux revenir a un html de base. Si tu ne peux pas, demande ici et je te redonnerait le HTML

-
Edité par Hsuissia 16 juillet 2018 à 16:45:29

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

Majoras16Forever

17 juillet 2018 à 22:20:08

Juste un petit détail mais c'est HTML5/CSS3 et pas le contraire et c'est
<pre class="brush: css;"> (si je ne trompe pas) et pas
...brush: c;...

-
Edité par Majoras16Forever 17 juillet 2018 à 22:21:35

AlexandrineJoubert

18 juillet 2018 à 19:17:15

Bonjour j'ai essayer de mettre un flex-box #"paragraphe" mais rien y fait et je suis donc toujours bloquer à la 4émé question je vous met mon code html et css je commence a désespérer bonne soirée a tous

<!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>
        
        <ul id="menu">
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Archives</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

      <h1>La Chine</h1>
      <div id ="paragraphe">
      <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>

/* Feuille de style */
#paragraphe
{
  display: flex;
  justify-content: center;
  flex-direction : column;
  text-align : justify;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}

Hsuissia a écrit:

C'est plutot pas mal. Du coup le seul truc qui te manque c'est l'alignement centrer des <p>. Pour ça tu as un truc tout bête qui est de mettre le margin en auto sur le left et right.
margin: 0 auto;
Ici je précise que pour les margin, le top et bot seront a 0, et le left-right en auto, et tu verras tes paragraphes centré

--

Sinon tu peux jouer avec les flexbox et définir une div container, et tes éléments en column 1 et centrer^^

AlexandrineJoubert

19 juillet 2018 à 19:40:48

Merci a tous j'ai enfin réussi a résoudre mon problème tout simplement dans mon code CSS je mettais un #p (paragraphe) et faisais que mon code ne fonctionnait pas

maintenant il fonctionne sans problème et je peux passer a l'étape suivant je vous remercie tous pour votre aide

Hsuissia

20 juillet 2018 à 9:48:31

Attention, #p n'est pas un paragraphe, mais un element d'id p, tu peux très bien dire <span id="p"></span>

Bon courage et bonne continuation a toi

ps : Pense a passer ton sujet en résolu

-
Edité par Hsuissia 20 juillet 2018 à 9:48:57

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !