css Mise en forme d'une page d'accueil avec Flexbox

HenriK

Membre
Bonjour,

J'avance petit à petit dans la construction de mon site web mais au niveau de la page d'accueil avec tous les blocs je m'y perds et je n'arrive pas à les placer comme je le souhaite. J'avais commencé avec Grid Layout mais franchement j'ai pas tout compris et avec Flexbox c'est mieux mais je vais pas au bout de mon idée.

Je vous ai fait un petit schéma, est-ce que quelqu'un peut m'aiguiller ? C'est la galère j'ai l'impression de perdre mon temps sur des petits détails.

Capture d’écran 2020-12-05 152217.png

Merci pour votre aide !
 
  Solution
CSS Grid Layout fonctionne très bien pour ce type de configuration
HTML
<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Gauche</div>
  <div class="item3">Gauche</div>
  <div class="item4">Gauche</div>
  <div class="item5">Droite</div>
  <div class="item6">gauche</div>
  <div class="item7">Footer</div>
</div>
CSS
.item1 { grid-area: header; }
.item2 { grid-area: menu1; }
.item3 { grid-area: menu2; }
.item4 { grid-area: menu3; }
.item5 { grid-area: main; }
.item6 { grid-area: right; }
.item7 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header header'
    'menu1 menu1 main main main main main'
    'menu2 menu2...

Wazz9

Membre
Hello à tous les deux,
Je n'ai pas la réponse, sachant qu'Henri n'a pas donné de code mais si vous voulez en apprendre plus sur FlexBox n'hésitez pas à consulter les tutos du forum, celui-là en particulier :

A+
 

HenriK

Membre
Oula !! je manque à toutes mes obligations !

Et bien pour dire vrai, à force d'essayer, d'échouer, d'essayer, d'échouer, d'essayer et d'échouer encore j'ai foutu en l'air le fichier ! :mad:
Mais faut que je m'y remette parce que sinon ça bloque tout le reste.

Malgré tout vous n'auriez pas le début d'un début de piste ? :p
Merci.
 

Nicolas

Membre actif
Il faut séparer ta page en 3 grandes parties (si je comprends bien ton schéma) :
  1. HEADER
  2. BODY
  3. FOOTER
Dans le HEADER c'est simple il n'y a qu'un bloc, ça tu sais faire.
Au niveau du BODY il faut refaire 2 grandes sections avec Flex
CSS
.blocs {
    display: flex;
    flex-direction: row;
}
  1. GAUCHE
  2. DROITE
Colonne de GAUCHE, nouveau Flex
CSS
.gauche {
    display: flex;
    flex-direction: column;
}
Et colonne de DROITE un bloc classique.
Je pense que ça te fait une bonne base de travail pour ta page d'accueil.

(y)
 
j'ai foutu en l'air le fichier ! :mad:
Ha ha ! Il y a des moments où je suis pas loin de le faire !
Mais ça me fait penser à une chose c'est qu'apparemment tu n'as pas de sauvegarde de tes fichiers HTML ou CSS ? Si tu supprimes l'un des fichiers sur lequel tu travailles par inadvertance c'est le PC entier que tu vas foutre en l'air...

Pense au sauvegarde ! Et bonne continuation pour ton site.
La page d'accueil semble pas mal sur ton croquis, en tout cas dans sa structure.
 

Anthony

Membre
CSS Grid Layout fonctionne très bien pour ce type de configuration
HTML
<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Gauche</div>
  <div class="item3">Gauche</div>
  <div class="item4">Gauche</div>
  <div class="item5">Droite</div>
  <div class="item6">gauche</div>
  <div class="item7">Footer</div>
</div>
CSS
.item1 { grid-area: header; }
.item2 { grid-area: menu1; }
.item3 { grid-area: menu2; }
.item4 { grid-area: menu3; }
.item5 { grid-area: main; }
.item6 { grid-area: right; }
.item7 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header header'
    'menu1 menu1 main main main main main'
    'menu2 menu2 main main main main main'
    'menu3 menu3 main main main main main'
    'right footer footer footer footer footer footer';
  grid-gap: 10px;
  background-color: black;
  padding: 10px;
}

.grid-container > div {
  background-color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
 

HenriK

Membre
Et bien dites donc !
Merci Anthony pour le code de GRID, du coup je vais finalement utiliser cette méthode à laquelle je n'avais rien compris vu ce que tu as écris en CSS : il me manquait au moins la moitié du code dans mon fichier.

Je mets ça en place sur mon fichier pour l'adapter, on va voir. merci à tous
 

Ziggy

Membre
Si tu utilises GRID Layout c'est déjà responsif, pas de problème
Euh non ce n'est pas responsif du tout !
Ce n'est pas parce que la taille des blocs diminue ou augmente selon que l'on diminue ou augmente la taille de l'écran que c'est reponsif.
Arrivé un moment ce n'est plus lisible en diminuant la résolution de l'écran et GRID continue de diminuer les blocs peu importe le résultat...

Il faudra passer par des break-points avec des media queries pour par exemple passer de 3 blocs cote à cote à 3 blocs les uns en dessous des autres, GRID ne le fait pas automatiquement.
 

Wazz9

Membre

L'occitan

Membre
Salut tout le monde,
Pour GRID c'est pareil, tu utilises les media queries et tu changes la disposition de tes areas

CSS
.grid-container {
    display: grid;
      grid-template-areas:
        'header header header header header header'
        'menu main main main right right'
        'menu footer footer footer footer footer';
      grid-gap: 10px;
      background-color: #2196F3;
    padding: 10px;
}

@media only screen and (max-width: 600px) {
.grid-container {
      display: grid;
      grid-template-areas:
        'header header header header header header'
        'menu menu menu menu menu menu'
        'main main main right right right'
        'footer footer footer footer footer footer';
      grid-gap: 10px;
      background-color: #2196F3;
      padding: 10px;
    }
}
 

Ces discussions pourraient vous intéresser...

  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Titre</h1>...
  • Résolue
Bonjour, Une question pour la mise à jour de Bootstrap quand une nouvelle version sort. Comment vous procédez ? J'utilise les CDN de bootstrap donc je me demandais ce que je devrais faire avant de les changer pour la nouvelle version ? Comment savoir ce qui va changer sur mon site internet ...
  • Résolue
Hello, Quand j'essaie de connecter mon fichier PHP à la base de données sur mon serveur local cela ne fonctionne pas. (site WordPress) ERROR ESTABLISHING A DATABASE CONNECTION Pourtant mes éléments sont bons, j'ai vérifié et revérifié. Je vous colle le code du fichier PHP correspondant à la...
Haut