exercice3 pratique de mise en page Flex

Sujet résolu

17 février 2020 à 16:59:00

Bonjour,

Dans l'exercice de pratique, à la fin du chapitre sur la mise en page avec Flex-box, je suis arrivé à résoudre les 2 premiers et le 4èmeexercices, mais je n'arrive pas toujours à résoudre le 3ème où on me demande mettre côte à côte le header le menu.

Voivi mes codes. Merci par avance.

<!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></header>
          <header>
            <nav>
       <ul>
         <a href="#">Accueil</a>
          <a href="#">Archives</a>
          <a href="#">Contact</a>
          </ul></nav>
		  </header>         
    </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>

/* Feuille de style */
p
{
  font-size: 80%;
  text-align: justify;
  margin:auto;
}

-
Edité par AbcAbc6 18 février 2020 à 18:25:53

Gérard LAFONT

Mewen_bzh

17 février 2020 à 17:05:38

Ce sont les mêmes codes que dans ton autre sujet : https://openclassrooms.com/forum/sujet/probleme-exercice3-pratique-de-mise-en-page-flex

Normal ?

Je ne réponds pas aux messages privés.

Gérard LAFONT

18 février 2020 à 16:38:45

Non, je me suis trompé et j'ai copié le mauvais code css.

Voici celui que j'ai corrigé:

/* Feuille de style */
p
{
  width: 80%;
  text-align: justify;
  margin:auto;
}

Gérard LAFONT

Mewen_bzh

18 février 2020 à 17:20:23

OK.

Et du coup, qu'as tu essayé pour la question qui te demande de mettre côte à côte le header le menu ?

Je ne réponds pas aux messages privés.

AbcAbc6

18 février 2020 à 18:25:25

Bonjour, ton HTML n'est pas bon, tu peux voir tes erreurs en passent ton code au validateur https://validator.w3.org/#validate_by_input

Pour retirer les puces d'une liste, il ne faut pas supprimer les item de cette liste (ou sinon ce n'est plus une liste).

Seul la balise <li> est enfant direct de la balise <ul> ou <ol>. Retire les puces en CSS, fait une recherche pour découvrir comment on fait (c'est le ut de l'exercice)

Indente correctement ton code, ce sera plus facile pour te relire, et pour ceux qui te lisent.

PS : Je supprimes "problème" dans le titre de ce sujet, si tu postes on ce doute que tu as un problème.

-
Edité par AbcAbc6 18 février 2020 à 18:27:56

Gérard LAFONT

18 février 2020 à 18:51:20

Réponse au messag de Mewen_bzh: Je n'arrive pas à faire cet exercice. J'ai tout essayé mais rien ne marche

Réponse au message de Anonyme:

Je ne sais pas comment on fait pour retirer les puces en CSS. Je n'ai pas appris à le faire.

Je n'utilise pas le validateur car je ne maîtrise pas suffisamment l'anglais.

Merci à tous les deux pour vos réponses

-
Edité par Gérard LAFONT 18 février 2020 à 18:54:21

Gérard LAFONT

AbcAbc6

18 février 2020 à 19:03:45

Gérard LAFONT a écrit:

Réponse au messag de Mewen_bzh: Je n'arrive pas à faire cet exercice. J'ai tout essayé mais rien ne marche

Bien justement on te demande ce que tu as essayé pour t'aider.

Gérard LAFONT a écrit:

Réponse au message de Anonyme:

Je ne sais pas comment on fait pour retirer les puces en CSS. Je n'ai pas appris à le faire.

Grace à une recherche tu apprendras. Développer ce n'est pas que suivre des tutos, c'est plus de 50% du temps en recherche et lecture de la documentation.

Tu peux t'aider de ceci : (en français)

(C'est quand même fous ce bug sur le forum, la disparition du nom des modo!!! )

Gérard LAFONT

23 février 2020 à 11:32:50

Bonjour,

Réponse à Mewen_bzh: je ne me rappelle plus de tous les essais que j'ai fait. Il me faudrait un exemple concret pour comprendre.

Réponse à Anonyme: Je suis d'accord avec ce que vous me dites, mais sachez que je ne cherche pas à devenir un développeur professionnel. Je veux simplement me familiariser avec l'HTML et le CSS, sur les conseils d'un ami, car j'ai déjà fait des sites internet mais en me servant de logiciels tels que Dreamweaver, Publischer et Word et je voudrais les améliorer. Voici un exemple de ce que j'ai fait: www.monminitourdefrance.com

Je ne suis pas un spécialiste de la programmation et, pour moi, il est plus facile d'avance quand j'ai des exemples concrets.

Si ne n'arrive pas à réaliser entièrement cet exercice, je paserai au cours suivant, sasn le faire.

Gérard LAFONT

Herozion

24 février 2020 à 13:46:42

<div id="topsection">
    <header>
        <h1>Le blog trotter</h1>
    </header>
    <nav>
        <ul>
            <a href="#">Accueil</a>
            <a href="#">Archives</a>
            <a href="#">Contact</a>
        </ul>
    </nav>
</div>

#topsection {
   display:flex;
}

https://developer.mozilla.org/fr/docs/Web/CSS/flex

-
Edité par Herozion 24 février 2020 à 14:39:05

AbcAbc6

24 février 2020 à 14:13:50

@Herozion bonjour,

AbcAbc6 a écrit:

Bonjour, ton HTML n'est pas bon, tu peux voir tes erreurs en passent ton code au validateur https://validator.w3.org/#validate_by_input

Pour retirer les puces d'une liste, il ne faut pas supprimer les item de cette liste (ou sinon ce n'est plus une liste).

Seul la balise <li> est enfant direct de la balise <ul> ou <ol>.

Sinon c'est le principe oui.

Herozion

24 février 2020 à 14:31:27

Ben si tu regarde bien j'ai corrigé sa partie dans le code html que je lui est fourni ...

sauf le <ul> donc voici la correction

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

-
Edité par Herozion 24 février 2020 à 14:40:30

Gérard LAFONT

27 février 2020 à 16:47:00

Merci beaucoup Herozion

Gérard LAFONT