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...

L'occitan

Membre
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 responsif
Et bien c'est la définition même du responsif !

GRID Layout est tout à fait responsif puisqu'il adapte la taille de chacun des conteneurs à la résolution de l'écran.
Evidement cela a ses limites et à partir d'un certain point il faut passer par mes break-points.

D'ailleurs de simples blocs <div> sont responsifs, essaye ce code dans un éditeur en ligne et réduit la fenêtre du navigateur et tu verras que le texte ne sort pas du viewport alors qu'il n'y aucune configuration CSS...
HTML
<div>
    <div>Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In the next chapter you will learn how to fix that.</div>
    <div>Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In the next chapter you will learn how to fix that.</div>
    <div>Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In the next chapter you will learn how to fix that.</div>
    <div>Notice that the webpage in the example does not look good when you resize the browser window to a very small width. In the next chapter you will learn how to fix that.</div>
</div>
 

HenriK

Membre
Pour GRID c'est pareil, tu utilises les media queries et tu changes la disposition de tes areas
C'est ce que je venais chercher.
La réponse est arrivé avant la question, il est fort L'occitan !

Une petite question encore, si j'utilise plusieurs mediaqueries pour un même élément est-ce qu'il y a un ordre à respecter dans le fichier CSS ?
Et si dans le premier mediaqueries je ne personnalise pas une propriété cela veut dire qu'elle garde la valeur originale ou bien il faut quand même la réécrire ?
 

HenriK

Membre
Il y en a qui ont essayé...
Merci @Naruto_Z
Mais ce sujet ne répond pas à ma deuxième question: est-ce qu'il faut réécrire toutes les propriétés ? Même celles qui ne changent pas ?

Sachant que j'ai une div avec plus de 12 propriétés et que à un certain break-point je n'ai que le width et le margin qui changent...
Merci ! (désolé je ne suis plus chez moi depuis quelques jours et je ne peux pas tester en direct)
 

Cascadeur

Membre
C'est clairement plus simple en essayant c'est sûr.
Non il n'est pas nécessaire de réécrire tout le code CSS, seulement celui qui change avec le break-point. Pour l'ordre il faut juste placer le code CSS concerné par les media queries après le code d'origine, c'est tout.
 

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