utilisation de flexbox

cas concret

Sujet résolu

17 septembre 2019 à 13:41:33

Bonjour,

je débute en HTML et CSS3, j'aimerai réaliser un site qui utilise les flexbox dans mon cas, mais cela ne fonctionne pas et je n'arrive pas à trouver la cause. Je veux simplement afficher un logo à gauche (d'abord sous forme de texte) et un menu à droite. En ce qui concerne "ce qui à déjà été fait", c'est simple j'ai tout essayé et je suis resté des heures sur le problème......

Merci.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Nutrition optimisée</title>
	<meta name="author" content="XO PIXEL">
	<meta name="viewport" content="width=device-width; initial-scale=1;maximum-scale=1">
	<link rel="stylesheet" href="styles.css" />
	</head>
	
	<body>
	<header>
		<div id="conteneur ">
		<div class="logo">Herbafit</div>
		
		<div class="menu">
		<nav>
                  <a href="#">Mon objectif</a>
                  <a href="#">La marque</a>
                  <a href="#">Blog</a>
                  <a href="#">Contact</a>
        </nav>
        </div>
        </header>
        	
	<section> 
		<div class="img"> 
			<img src="images/accueil.jpg" width="1200" height="500" alt="Photo de Nutrition" />
		</div>
	</section>

header
 {
		background-color: DodgerBlue;
        height: 4em;
 }

 #conteneur
 {
 	display: flex;
 }

.logo {
		display: flex;
		margin-left: 15px;
		padding-top: 20px;
}

.menu
{
	   display: flex;
	   margin-left: 1000px;
	   padding-bottom: 60px;
}		

.img
{
	display: flex;
}

philiga

17 septembre 2019 à 15:09:25

Bonjour,

Il manque un div de fermeture de ton conteneur, mais plutôt que de l'ajouter, simplifie: tu utilises beaucoup trop d'éléments imbriqués.

C'est inutile: ta balise <header> sert de contenant général et <nav> suffit pour le menu.

Ainsi ton html d'en-tête se réduit à ceci:

<header>
<div class="logo">Herbafit</div>
<nav>
<a href="#">Mon objectif</a>
<a href="#">La marque</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</header>

et le css à

header {
	background-color:DodgerBlue;
	height:4em;
display:flex;
  flex-direction: row;
  justify-content: space-between;
  width:100vw;
  border:5px ridge red;
}

Je te recommande aussi de "beautifyier" ton code avec un outil comme:

https://tools.arantius.com/tabifier

et avec le très pratique jsbin.com (exemple), tu peux voir en rouge tes incohérences structurales comme ton oubli de fermeture de div.

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

M A

17 septembre 2019 à 15:58:16

Merci pour ta réponse, cela fonctionne bien sauf qu'il faut que je centre le menu et le logo.

Ce que j'ai vraiment du mal à comprendre, c'est qu'au final je ne sais pas si le code utilise flexbox. Sur le code envoyé, je n'ai pas vu de conteneur

Sur le cours d'openclassroom, voici ci-dessous comment flexbox est expliqué

Je bloque vraiment sur cette notion depuis plusieurs jours... Merci.

Le conteneur est une balise HTML, et les éléments sont d'autres balises HTML à l'intérieur :

<divid="conteneur">

<divclass="element">Elément 1</div>

<divclass="element">Elément 2</div>

<divclass="element">Elément 3</div>

</div>

philiga

17 septembre 2019 à 17:51:10

Oui ; un conteneur peut être tout élément HTML qui en contient un ou plusieurs autres (et ce n'est en rien spécifique à flex).

En général, c'est l'élément neutre <div> qu'on utilise, mais quand tu as des éléments HTML5 déjà "parlant" comme<aside> ou <nav>, il faut les privilégier et comme ils donnent à la fois la sémantique et la fonction de conteneur, aucun besoin de rajouter une div par-dessus.

Plus ta structure est minimaliste, plus elle est claire et moins tu risques de faire d'erreurs de ciblages.

Sur l'exemple que je t'ai donné, le conteneur est <header> et il gère bien ses deux enfants : la div.logo et la boite <nav> en display:flex;

Par rapport à quoi veux-tu les centrer?

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

M A

17 septembre 2019 à 17:56:07

<div id="conteneur">
    <div class="element">Elément 1</div>
    <div class="element">Elément 2</div>
    <div class="element">Elément 3</div>
</div>

Ici c'est plus clair.

philiga

17 septembre 2019 à 18:04:14

Si c'est verticalement dans le header que tu veux les centrer, tu ajoutes:

align-items:center;

Un guide très visuel ici: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

M A

17 septembre 2019 à 18:08:55

Donc si je comprends bien, on peut utiliser les balises nav, section, article, footer... comme conteneur ? Avec ces balises pas besoin de div alors.

Mais il est vrai que dans le cours c'était écrit.

Pour le centrage, j'ai repris ton code, mais le logo et le menu n'étaient pas centré dans le header, ils se sont affichés tout en haut, j'ai donc du utilisé les marges (margin-top principalement) pour centrer.

De plus, dans l'explication ils expliquent que le css doit contenir ceci:

.element:nth-child(1)
{
    order: 3;
}
.element:nth-child(2)
{
    order: 1;
}
.element:nth-child(3)
{
    order: 2;
}

Par conséquent, pourquoi je ne retrouve pas .logo:nth-child(1) et nav:nth-child(2)

Je suis totalement perdue..

philiga

17 septembre 2019 à 18:26:35

Pour le centrage vertical, enlèves tes margin-top ou autres inutiles et fait comme indiqué précédemment:

align-items:center;

Pour le sens des order, tu peux aussi voir sur le lien donné ci-dessus.

Sinon, je ne suis pas le cours, donc je ne peux pas tout suivre...

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

M A

17 septembre 2019 à 19:35:49

C'est plus clair maintenant, merci.