Partage
  • Partager sur Facebook
  • Partager sur Twitter

Exercice: alignement header et menu

    14 janvier 2020 à 19:32:16

    Bonjour,

    Je rencontre un problème de compréhension de l'énoncé de l'exercice sur l'alignement du header et du menu côte à côte.

    J'ai essayé de mettre le menu en premier puis le header et inversement mais rien ne change je ne peux pas validé mon énoncé pour continuer mon apprentissage en HTML/CSS.

    Est-ce que quelqu'un peut m'expliquer sur le problème que je rencontre, s'il vous plait?

    Merci

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 14 janvier 2020 à 19:37:41

      Bonsoir, c'est dans le cous sur OC? Quel est l’URL de l'énoncer ou quel est l'énoncer de votre exercice?

      Pourriez vous nous communiquer le code que vous avez écrit (en utilisant le bouton code du forum </> , pas de capture de code.)

      D'après ce que vous nous en dite, je dirais un display: flex sur le parent du header et du menu si ceux-ci sont frère.

      -
      Edité par AbcAbc6 14 janvier 2020 à 19:39:46

      • Partager sur Facebook
      • Partager sur Twitter
        14 janvier 2020 à 19:55:01

        Bonsoir,

        Voici l'URL de l'énoncé : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/4214576-pratiquez

        j'ai déjà mis un display: flex ; en englobant header et menu.

        Dans le code ci-dessous j'ai retiré les deux order: ...; pour essayer en de changeant aucun éléments d'ordre.

        p {
          text-align: justify;
          width : 80%;
          margin: auto;
        }
        #conteneur {
          display: flex;
          
        }
        .box:nth-child(1) {
          text-align: center;
        }
        .box:nth-child(2) {
          text-align: center;
        }



        -
        Edité par AlexisCals 14 janvier 2020 à 19:57:33

        • Partager sur Facebook
        • Partager sur Twitter
          Staff 14 janvier 2020 à 20:09:04

          Ha oui, je ne l'avais plus de tête cet exercice.

          Le HTML vous est donné, mis à par la balise <nav> qu'il faut ajouter au bon endroit, vous ne devez pas changer le HTML, sinon le robot codey ne s'y retrouvera pas.

          Donc il n'y a pas de  <div id="conteneur"> mais     <div id="topsection">

          A vous de changer votre CSS en fonction.  ;)

          • Partager sur Facebook
          • Partager sur Twitter
            14 janvier 2020 à 20:11:38

            Merci pour votre aide. 

            Je ne savais pas que l'on ne devez pas touché le code HTML sauf pour le menu.

            Je dois changer le nom de l'id en topsection?

            -
            Edité par AlexisCals 14 janvier 2020 à 20:12:46

            • Partager sur Facebook
            • Partager sur Twitter
              Staff 14 janvier 2020 à 20:38:08

              AlexisCals a écrit:

              Je dois changer le nom de l'id en topsection?

              Dans la CSS oui.



              • Partager sur Facebook
              • Partager sur Twitter
                14 janvier 2020 à 20:41:21

                Pas dans le code HTML?

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



                • Partager sur Facebook
                • Partager sur Twitter
                  Staff 14 janvier 2020 à 22:41:07

                  Non pas de modification du HTML le parent de <header> et du menu de la navigation vous est donné dans l'exercice c'est <div id="topsection">

                  Par contre je vois que vous avez modifier le HTML, Je ne suis pas sur que codey apprécie...... :o

                  Vous avez ajouté une div autour du header et de la navigation en ajoutant des class, ce n'est pas correct du point de vue de l'exercice mais également du développent également. Pourquoi?

                  Une balise <div> n'a aucun sens sémantique (j'imagine que ça c'est OK pour vous), et sert à regrouper des éléments entre eux (pour diverse raisons possible comme un style ou positionnement particulier). Ici il n'y a aucun regroupement, la balise <header> est seul enfant direct de la <div> que vous avez ajouté, et pareillement pour la <nav> => inutile. 

                  D'un autre point de vue les class header et navigateur ne sont pas nécessaire.  On peut très bien cibler un enfant au départ d'un parent ou ancêtre.  Comme ceci :

                  #topsection header {
                                  /*cible le header de topsection*/ 
                  }
                  #topsection nav {
                                  /*cible la navigation de topsection*/
                  }
                  #topsection > * {
                                  /*cible tous les enfants direct de topsection à savoir le header et la navigation (<nav>)*/
                  }

                  Cette URL est à garder sous le coude tout au long de votre apprentissage =>

                  https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048

                  Autre erreur: les puces de décoration de la liste. Vous ne devez pas enlever les balises <li>, cette balise forme chaque partie de la liste ordonnée ou non ordonnée (<ul> ou <ol>). Chaque fois que vous avez une liste <ul> ou <ol> l'enfant direct est obligatoirement un <li>.

                  Passez le code que vous avez modifié au validateur pour voir les erreurs => https://validator.w3.org/#validate_by_input

                  Je ne vous donnerais pas la solution de comment supprimer les puces d'une liste, car c'est justement le but de l'exercice. Il faut faire une recherche par vous même. La recherche de documentation est importante pour pouvoir vous débrouiller par vous même. 

                  Je vous donne le code de départ pour que puissiez repartir sur une bonne base. Recommencer l'exercice et valider chaque point avant de passer au suivant.

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




                  -
                  Edité par AbcAbc6 14 janvier 2020 à 22:46:50

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Exercice: alignement header et menu

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown