Bonjour à tous, 

J'ai du mal à bien mettre en œuvre flexbox lorsque je dois organiser une page web.

Je m'explique, j'en suis au TP "céer une page web pas à pas" sur l'initiation à html et css de ce site, je n'en suis donc qu'au début.

J'ai compris le concept de flexbox et l'intérêt de s'en servir mais pour l'appliquer par contre. Afin de vraiment vivre à fond ce TP j'ai décidé d'utiliser Figma pour créer de toute pièce un visuel avec des guides et de m'en servir comme support (ça me permet aussi de prendre en main Figma au passage).

Donc je maquette mon site, je pose le découpage (jusque la tout va presque bien), hé puis vient le moment de coder et la j'ai beau regarder des vidéos sur flexbox, j'ai beau comprendre le concept et réussir à l'appliquer dans les tutos, pour ce qui est de ce site je n'y arrive pas.

J'ai donc plusieurs questions aux personnes qui savent ici:

1- Est-ce que le découpage que j'ai fait sur Figma est bon?

2- Je vois sur le tuto OCR que la personne utilise des div id pour les containeurs et des div class pour les items mais ailleurs j'ai vu des personnes mettre des div class pour les containers et les items et d'autres encore rajouter des class ou des id après la balise container ex: <header class="mon_titre"> ou <section id="masection">. Qu'est ce qu'il faut utiliser pour baliser le container et les items correctement? 

3 - J'arrive souvent à bien organiser à l'intérieur de mes containers mais j'ai du mal à organiser mes containers dans la page au global. est-ce qu'il faut jouer avec a fameuse balise <div id="bloc_page"> pour ça? ou ajouter plus de containers?

4- créer des containers et des items ça va mais on me dit d'un côté qu'un items ne peut pas être un container et de l'autre que des containers peuvent contenir d'autres containers. Donc quand je dois créer un container qui contient des items mais qui eux mêmes peuvent être des containers (genre mon menu navleft qui à des boutons séparés) je fais comment?

5- C'est cracra de mettre des objets en positions absolute alors qu'on à du flex box à côté?

Je me sens vraiment débile de ne pas arriver à faire ça mais je me refuse de passer à la suite sans savoir appliquer correctement ce concept et de savoir organiser mes pages sans avoir un fichier CSS qui fait 3km.

Merci par avance à ceux qui auront la bonté de m'aider, malgré mon code cracra et ce texte à rallonge 

Bonnes fêtes à tous,

body {
  display: flex;
  align-items: center;
  background: url("https://i.imgur.com/O4Su9QQ.png?1");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#bloc_page {
  display: flex;
  flex-basis: 100%;
}
/* Header */
header {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
header h1 {
  display: flex;
  flex: 2;
  width: auto;
  font-family: comfortaa;
  color: #585858;
}
header h2 {
  display: flex;
  flex-direction: row;
  margin: auto;
  flex: 3;
  width: auto;
  font-family: comfortaa;
  color: #480075;
}
.ma_photo {
  height: 200px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

/* Navigation */
#nav {
  height: 70px;
  width: 150px;
  display: flex;
  flex: 4;
  flex-direction: row;
  justify-content: center;
  align-self: flex-start;
}
.top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  list-style-type: none;
  background: linear-gradient(
    90.53deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.0625) 99.95%,
    rgba(72, 0, 117, 0.02) 99.96%,
    rgba(255, 255, 255, 0.25) 99.97%,
    rgba(255, 255, 255, 0.25) 99.98%
  );
  backdrop-filter: blur(45px);
  border-radius: 35px;
  border-top: 2px white solid;
  font-family: "Montserrat Alternates", sans-serif;
  font-size: 1.8em;
}
.top a {
  margin: 0 30px;
  text-decoration: none;
  color: #585858;
  align-items: center;
}
#navleft {
  font-family: "Arial", sans-serif;
  font-size: 1.4em;
  color: #ffffff;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 200px;
  top: 300px;
  left: 15px;
}
#bottom a {
  text-decoration: none;
  color: #ffffff;
}
.navleftbouton {
  width: 350px;
  padding: 10px;
  margin: 5px;
  border: 1.5px solid #480075;
  border-radius: 35px;
  background-color: #480075;
  text-align: center;
}
a:hover {
  color: #480075;
}
a {
  list-style-type: none;
  color: white;
  text-decoration: none;
}

/* Section */
section {
  display: flex;
  flex-wrap: wrap;
}
article {
  position: absolute;
  width: 805px;
  height: 421px;
  left: 900px;
  top: 370px;
  font-familly: "Comfortaa", cursive;
  font-size: 1.7em;
  color: #8bd1d1;
  text-align: center;
  flex-wrap: wrap;
}
h3 {
  color: #dbbd76;
  font-family: Montserrat;
  font-style: normal;
  font-size: 1.3em;
  color: #8bd1d1;
}
strong {
  color: #dbbd76;
}
p {
  font-family: Montserrat;
  font-style: normal;
  font-size: 1.3em;
  color: #8bd1d1;
}
aside img {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  width: 500px;
  height: 340px;
  left: 2040px;
  top: 400px;
}
#petit_personnage {
  display: flex;
  margin-right: 15px;
  position: absolute;
  width: 243px;
  height: 359px;
  left: 2200.68px;
  top: 815px;
  transform: rotate(-6.42deg);
}
#copyright p {
  position: absolute;
  width: 1918px;
  height: 30px;
  left: 1100px;
  top: 1300px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 15px;
  display: flex;
  color: white;
  align-items: center;
}
#PC {
  position: absolute;
  left: -0.16%;
  right: 72.66%;
  top: 750px;
}
#socials {
  position: absolute;
  width: 520px;
  height: 108px;
  left: 1050px;
  right: 1050px;
  top: 1135px;
}
#infos {
  position: absolute;
  width: 113px;
  height: 60px;
  left: 190px;
  top: 1170px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="fr">

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&family=Montserrat:wght@500&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&family=Montserrat+Alternates:wght@900&display=swap" rel="stylesheet">
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" />
  <title>Julien Leclercq - Développeur Web</title>
</head>

<body>
  <div id="bloc_page">
    <header>
      <div class="ma_photo">
        <img src="https://i.imgur.com/RPbsoHx.png" alt="ma_photo" />
        <h1>Jar Jar Binks</h1>
        <h2>Développeur Web</h2>
      </div>
      <div id="nav">
        <nav>
          <ul class="top">
            <li><a href="#">Mes réalisations</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <nav>
      <ul id="navleft">
        <li class="navleftbouton"><img src="https://i.imgur.com/KIcJ3J3.png" alt="pdf" /></li>
        <li class="navleftbouton"><img src="https://i.imgur.com/XWSd9Os.png" alt="mail" /></li>
        <li class="navleftbouton"><img src="https://i.imgur.com/1ob6mMs.png" alt="tel" /></li>
        <li class="navleftbouton"><img src="https://i.imgur.com/GNb8QkQ.png" alt="loc" /></li>
      </ul>
    </nav>
    <section>
      <article>
        <h3>Créer un site à <strong>votre image</strong></h3>
        <p>Vous souhaitez développer votre <strong>entreprise</strong> sur le <strong>web</strong> ou ouvrir un site personnel afin d'y mettre en avant vos compétences?</p>
        <p>Je peux vous accompagner et développer, pour vous, un site internet sur-mesure</p>
      </article>
      <aside>
        <img src=https://i.imgur.com/XTsYdJF.png alt="mes_compétences">
      </aside>
      <div id="petit_personnage">
        <img src="https://i.imgur.com/4mz4BKV.png" alt="petit_personnage" />
      </div>
      <div id="PC">
        <img src="https://i.imgur.com/GvjRJ9N.png" alt="PC" />
      </div>
    </section>

    <footer>
      <div id="socials">
        <img src="https://i.imgur.com/YbsfUBI.png" alt="facebook" />
        <img src="https://i.imgur.com/1xQYJLk.png" alt="linkedin" />
        <img src="https://i.imgur.com/IxzOs7O.png" alt="instagram" />
        <img src="https://i.imgur.com/tUuOBV1.png" alt="github" />
      </div>
      <div id="infos">
        <p>A propos</p>
        <p>contact</p>
      </div>
      <div id="copyright">
        <p>Copyright 2021 JarJarBinks - Tous droits réservés
        </p>
      </div>
    </footer>
  </div>

</html>

faire un display flex sur body n'est pas réellement nécessaire mais si vous voulez en faire dans ce cas precis vous devez ajouter flex-direction: column;

car par defaut le flex-direction sera a row ou je pense sera hérité du parent s'il y en a.

Ensuite pour la partie figma vous avez parfaitement fait les choses c'est un bon entraînement pour flexbox.

Pour repondre rapidement a vos questions en partant du bas, il faut toujours savoir ce qu'on fait quand on utilise des positions fixed comme absolute. Il est bon a savoir aussi que l'element que vous mettez en position absolute ou fixed se base en x et y sur le dernier parent qui a une position donc par defaut body s'il n'y en a pas. 

Donc on peut combiner flex et position. 

Et puis celui qui vous a dis qu'un item d'un container ne peut pas lui meme etre le container d'un autre élément a menti, en tous cas si j'ai bien compris le but de la phrase

on peut tres bien avoir

.container qui est le parent de 

.item

et ce 

.item qui lui meme est parent d'autres choses

Ensuite nommez vos balises header ou quoi sont des choix si vous pouvez cibler l'élément sans trop de soucis dans n'importe quel cas une class ou un id n'est pas obligatoire. Essayez de quand meme conserver les id pour des éléments réellement particulier et unique a votre page

Pour ce qui est de l'html css complet que vous avez fourni corriger le tout 1 a 1 reviendrait a faire la page ce qui ne vous aiderait pas alors si vous le souhaitez via discord je peux vous aider pas a pas sinon je sais qu'il y avait un tres bon site fait pour s'entraîner a flexbox a base de crapauds a déplacer si j'en trouves le lien je vous le fournirai

-
Edité par zvheer 26 décembre 2021 à 15:35:46

Bonjour,

1) Oui il me semble bien;

2) Dans le cours sur OC, il donne des exemples d'utilisation des ID, mais ce ne sont que des exemples. De manière générale n'utilisez que des class pour le css, garder les identifiants pour le javascript, les ancres, et les éléments de formulaire (liaison entre le label et l'input correspondant); C'est une question de poids de sélecteur, un id sera plus difficile à surcharger qu'une class.

3) Non, de mémoire la <div id="bloc-page"> du cours sert à centrer le contenu et lui donner une taille. C'est pour lui donner un comportement comme tu peux le voir sur ce forum.

4) Il me semble que un container flex est 'prioritaire' sur le flex-items si celui-ci est enfant direct d'un container. On peut très bien indiquer qu'un flex-items est également container flex pour ses enfant.

5) Ce n'est pas parce que flex est apparu qu'il faut oublier les autres positionnement (float absolute). Mais pour le positionnement en absolute, celui-ci ce fait dans des cas bien précis et particulier, en tout cas pas sans un parent positionner (généralement en relatif) pour lui servir de référent. On positionne les éléments les un par rapport au autre, pas par rapport au point 0,0 de la page. 

Vous faite un mauvais usage de la position absolute. Pour ce que vous souhaitez faire, normalement vous n'en avez pas besoin.

Du point de vue du code, je n'ai pas tout regarder mais :

• Il ne faut pas mette du flex partout et à tout vas, les block ce place les un en dessous des autres naturellement.
• Pas de width: 100% sur un block Lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/
• Les préfixe de background-size ne sont pas nécessaire => https://caniuse.com/mdn-css_properties_background-size
• Pourquoi le <h2> en flex, il n'a pas d'élément enfant??
• Utilisation erronée (et inutile)  de la position absolute

PS : le jeux flexbox dont zvheer   parlait https://flexboxfroggy.com/#fr

-
Edité par AbcAbc6 26 décembre 2021 à 16:26:29

Ouah merci beaucoup pour vos réponses rapides et complètes. Je suis entrain de repartir de zéro pour prendre en compte vos retours. Je vais m'entrainer sur flexboxfroggy, je ne connaissait pas c'est super  Bonne fin de journée à vous 2!

« De manière générale n'utilisez que des class pour le css, [...] un id sera plus difficile à surcharger qu'une class. »

La seconde assertion est vraie, mais l'ensemble est discutable.

L'important est de connaitre toute la chaine de la cascade si je puis dire. Le poids des sélecteurs en fait partie.

J'utilise des id en CSS lorsque justement je ne veux pas que le formatage soit contredit par d'autres règles CSS, ou au contraire pour limiter la portée d'une classe. Recommander de ne conserver les id que pour le JS me semble abusif.

Cordialement.

Bon hé bien, après avoir pris en compte vos remarques et m’être entraîné avec flexbox froggy, j’ai constaté que j’avais du mal a bien baliser mon html dès le départ sans faire le css à côté. De base je suis quelqu'un de très visuel, donc j’ai décidé d’essayer de mettre en place mes containers et mes items sans contenu juste en les balisant en html et en leur mettant des backgrounds de couleurs puis une fois mon organisation faite je mets le contenu dans mon html. Et la c’est la révélation, j’ai gagné un maximum de temps et je ne mets plus dé propriétés inutiles dans mes enfants. Alors si ça peut aider d’autres débutants ça peut être une solution de départ. Peut être que cela me freinera plus tard mais au moins le temps de mieux maîtriser mon balisage html je fais comme ça. merci en tout cas à ceux qui répondent à ce genre de questions car ça m’a beaucoup aidé à prendre du recul 🙏🏻

Yep, beaucoup de dev front end font ca a peu de choses pres.

D'abord l'ecriture du corps donc la quasi totalite du html puis ensuite le css.

Donc oui l'entraînement primaire pour vous est de pouvoir vous faire une idée assez rapide des balises qui seront les une dans les autres, mais tout en pensant à la meilleure disposition pour vous faciliter la partie responsive si vous n'utilisez pas la methode du 1css pour un support (pc, telephone....) 

-
Edité par zvheer 29 décembre 2021 à 16:33:19