Partage
  • Partager sur Facebook
  • Partager sur Twitter

Aide Header et Menu cote à cote

15 janvier 2017 à 22:41:09

Bonsoir, je n'arrive pas a placer le Header et le menu cote à cote, qui peux m'aider svp ?
  • Partager sur Facebook
  • Partager sur Twitter
Anonyme
16 janvier 2017 à 8:40:13

Bonjour,

Sans code, personne te peut t'aider ^^

  • Partager sur Facebook
  • Partager sur Twitter
16 janvier 2017 à 9:11:04

Bonjour,

si j'ai compris, tu as un header et le menu c'est une nav ?

Tu peux faire sur les deux

header,
nav
{
    display: inline-block;
    vertical-align: top;
}

Mais bien sûr, tu dois attribuer une largeur à chacun des deux. disons 60% pour le header et 40% pour la nav. Mais en général, un header prend toute la largeur de la page, c'est seulement les éléments à l'intérieur du header qui occupent une certaine largeur du header (pareil pour le footer). Regardes le header et le footer d'openclassrooms.



  • Partager sur Facebook
  • Partager sur Twitter
27 mars 2017 à 19:05:07

Bonjour, 

Je réponds au cas où d'autres personnes seraient intéressées à trouver la solution au problème. Il s'agit de l'exercice pratique de la partie 3 du cours sur HTML5 et CSS où l'on demande de placer le header et le menu côte à côte. 

Voici le print-screen de la solution,

Bonne journée, solution de l'exercice n°3

  • Partager sur Facebook
  • Partager sur Twitter
25 mai 2017 à 21:25:47

Bonjour,

Merci de ton aide!

  • Partager sur Facebook
  • Partager sur Twitter
24 juillet 2017 à 9:59:45

Bonjour, 

je coince aussi là dessus! Visuellement, ils sont côté à côté, mais le petit Codey me dit que 'ce n'est pas ça'. 

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

et le CSS : 

/* Feuille de style */

ul
{
  list-style: none;
}
section
{
  text-align: justify;
  width: 80%;
  margin: auto;
}
.tete
{
  display: flex;
  justify-content: center
}

Je pense bien qu'il doit y avoir une erreur qui se cache quelque part, mais je n'arrive pas à voir ou...

Merci d'avance à celui ou celle qui me débloquera ! 


  • Partager sur Facebook
  • Partager sur Twitter
24 juillet 2017 à 10:48:14

Où se trouve la section dans le code html ?
  • Partager sur Facebook
  • Partager sur Twitter
24 juillet 2017 à 11:26:26

juste en dessous. je l'ai pas collé parce que ça prenait de la place et je pensais que ça servait pas pour mon problème : 

 <section>
      <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>
     </section>
      <footer>
        <p>Copyright Le Blog Trotter</p>
</footer>

    </body>

</html>

-
Edité par JérômeAndre1 24 juillet 2017 à 11:27:08

  • Partager sur Facebook
  • Partager sur Twitter
24 juillet 2017 à 11:55:32

Je demande parce que le html et le css que tu as posté ne correspondent pas.
  • Partager sur Facebook
  • Partager sur Twitter
24 juillet 2017 à 12:13:05

j'ai tout posté sans trop me poser de questions mais en fait faut juste faire attention à ça : 

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

j'ai fais comme ça pour le <header> et le <nav> que j'ai nommé '.tete' et ça me dit toujours que c'est pas bon alors je comprends pas bien pourtant ils sont sur la même ligne.

  • Partager sur Facebook
  • Partager sur Twitter
24 juillet 2017 à 13:21:39

Le HTML n'est pas une intelligence artificielle. C'est à toi de lui dire à quel élément attribuer ton CSS. Pour attribuer le style tête a ton header, rajoute lui l'attribut class="tete".

Je te conseil de relire la parti du cours sur le css ;)

  • Partager sur Facebook
  • Partager sur Twitter
Si debugger, c’est supprimer des bugs, alors programmer ne peut être que les ajouter | Développeur Web et Mobile chez Beemoov
26 août 2017 à 15:14:44

bonjour a tous , perso pour moi sa ne marche pas , pourtant j'ai essayé toutes les solutions donné precedement, je ne comprend pas je ne vois pas ce que je fais de mal.

merci d'avance pour votre aide

-
Edité par JeromeLadamne 26 août 2017 à 15:16:55

  • Partager sur Facebook
  • Partager sur Twitter
4 septembre 2017 à 17:19:18

la réponse:

#topsection,menu
{
display:flex;
justify-content:center;
}

  • Partager sur Facebook
  • Partager sur Twitter
4 septembre 2017 à 20:46:09

JérômeAndre1 a écrit:

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



Il ne te manque pas quelque chose la ???

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


il ne faut pas hésiter à perdre du temps à apprendre pour en gagner par la suite !!!



  • Partager sur Facebook
  • Partager sur Twitter
23 novembre 2017 à 16:35:47

Bonjour.

Navré de faire remonter le sujet mais je ne comprends pas le terme #topsection.

Il ne devrai pas être remplacé par #head ?

Merci.

  • Partager sur Facebook
  • Partager sur Twitter
28 novembre 2017 à 18:24:53

en fait il a remplacé le code <div> par #topesction et tu peux  mettre dive ça fonctionne aussi
  • Partager sur Facebook
  • Partager sur Twitter
6 janvier 2018 à 12:42:11

Moi ça a marché direct !!! Merci Jérôme B.
  • Partager sur Facebook
  • Partager sur Twitter
26 février 2018 à 15:54:10

#topsection
{
display: flex;
justify-contentflex-start 
  • Partager sur Facebook
  • Partager sur Twitter
26 février 2018 à 17:47:39

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention plus facilement.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster, demandez-vous si ce que vous allez dire apporte quelque chose au sujet. Si votre message n'apporte rien, vous ferez perdre du temps à tout le monde et le sujet pourrait dévier ou devenir difficile à suivre.

Aussi, vérifiez la date du topic. Le déterrage de topic nuit au bon fonctionnement du forum et est interdit. Utilisez les boutons pouce en haut pour dire merci. Si le topic date de plus de deux mois sans réponses, mieux vaut ne pas répondre.

Je ferme ce topic.

  • Partager sur Facebook
  • Partager sur Twitter

Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script