Partage

Problème dans l'exercice de mise en page

flexbox

12 mars 2018 à 15:49:59

Bonjour à tous,

Je suis actuellement sur l'exercice de pratique dans la mise en page du cours "apprenez à créer votre site web avec html et css", et je suis bloqué sur le 3ème point:

on me demande de mettre côte à côte le header et le menu, donc j'utilise le code suivant:

 div
{
    display: flex;

}

quand j'actualise cela fonctionne, mais quand je veux valider, on me dit que ce n'est pas ça. J'ai essayé d'autres solutions mais rien ne fonctionne. Du coup je suis un peu perdu, est-ce que quelqu'un peut m'éclairer?

Merci,

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
12 mars 2018 à 15:58:09

Bonjour,

il faudrait nous montrer le HTML associé à ce CSS pour pouvoir t'aider... ;)

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
13 mars 2018 à 3:58:32

Bonjour

Il faut créer un conteneur avec deux blocs <div> :  un pour le header et un autre distinct pour le menu

Il me semble que dans votre code le menu est solidaire du header car vous n'avez qu'un bloc div (topsection)

13 mars 2018 à 10:23:32

Merci pour le HTML. Le problème est assez simple : tu n'appliques pas ta propriété flex sur les bons éléments. ;)
Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
13 mars 2018 à 18:17:06

Merci pour vos réponses, je vais tenter de corriger
15 mars 2018 à 17:16:50

Rebonjour,

En essayant de tenir compte de vos réponses, j'ai essayé de corriger (1 conteneur avec 2 box) et en apparence cela fonctionne, mais quand j’essaie de faire valider l'exercice, il m'indique toujours que ce n'est pas ça, et je ne vois pas ou se trouve la (ou les) erreurs. C'est frustrant :D

15 mars 2018 à 20:19:53

retentez en respectant au maximum la syntaxe pré remplie
<div id="topsection"></div>

 normalement cette balise suffit à valider cette partie de l'exercice (attention au choix de # ou . dans le CSS)

-
Edité par oyefort 15 mars 2018 à 20:20:18

15 mars 2018 à 22:25:10

Solution sans rien modifier au HTML de base :

#topsection{
  display : flex;
  flex-direction : row;
  flex-wrap : nowrap;
}

Si tu n'applique pas le Flex sur le bon conteneur, forcément sa échouera... La solution la plus simple est souvent la meilleur, au-delà de cela, utiliser des DIV abusivement n'est pas une bonne idée...
16 mars 2018 à 9:43:11

Merci pour vos explications!!

Dur dur d'être débutant:D

Problème dans l'exercice de mise en page

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