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 d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
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

18 septembre 2018 à 12:09:07

/* Feuille de style */
ul
{list-style-type: none
}
#topsection
{
  display: flex;

}


div
{
  display: flex;
}

p

{
  text-align: justify;
  width: 80%;
  margin: auto;
}
Staff 18 septembre 2018 à 14:42:49

Bonjour,

Déterrage

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

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. Me contacter par MP si besoin.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!