CSS -- flexBox

18 octobre 2017 à 18:18:32

Bonsoir,

J'ai un problème en ce moment :

Voici une maquette de "mon site", j’essaye de le placer en css ( je sais il y a bootstrap et tout mais je veux y arriver en css pure pour apprendre )

oui je sais les couleurs sont juste affreuses ^^, mais c'est pour voir ou est ou, mes problèmes sont principalement dans la première colonne ( avec le bloc logo et le bloc menu). Je m'en vais détailler ca dessuite

J'aimerais avoir un bloc logo qui fasse 100px de hauteur sur 100px de large et avoir le menu qui se place à coté du logo dont la largeur varira en fonction des tailles d'écrans.

pour y voir un peu plus claire voici mon code html :

<body>

  <!-- /////////////////////////////////////////////////////////
  ///////////////////////////////HEARDER////////////////////////
  //////////////////////////////////////////////////////////////   -->

  <div class="header">

    <!-- ///////////Logo Fixe////////// -->
    <div class="logo">
      <p>logo</p>
    </div>

    <!-- ///////////Menu flexible////////// -->
    <div class="menu">
      <ul>
        <li><p>Accueil</p></li>
        <li><p>Actualités</p></li>
        <li><p>Infos flash</p></li>
        <li><p>Qui sommes-nous?</p></li>
        <li><p>Contact</p></li>
      </ul>
    </div>

    <!-- ///////////Slider////////// -->
    <div class="slider">
      <p>slider</p>
    </div>

  </div>

  <!-- /////////////////////////////////////////////////////////
   ///////////////////////////////CORPS//////////////////////////
   //////////////////////////////////////////////////////////////   -->
  <div class="couleur">

    <div class="corps">

      <!-- ///////////division article////////// -->
      <div class="article">

        <div class="articleP">
          <p>article principal</p>
        </div>
        <div class="bloc3art">
          <p>bloc de 3 articles</p>
        </div>
        <div class="vidéo">
          <p>bloc vidéo</p>
        </div>

      </div>

      <!-- ///////////division slideBar////////// -->
      <div class="slidebar">
        <p>slideBar</p>
      </div>

    </div>

  </div>


  <!-- /////////////////////////////////////////////////////////
  ///////////////////////////////FOOTER/////////////////////////
  //////////////////////////////////////////////////////////////   -->

  <div class="footer">

    <!-- ///////////bloc1////////// -->
    <div class="bloc1">
      <p>bloc 1</p>
    </div>
    <!-- ///////////bloc1////////// -->
    <div class="bloc2">
      <p>bloc2</p>
    </div>
    <!-- ///////////bloc1////////// -->
    <div class="bloc3">
      <p>bloc3</p>
    </div>

  </div>

</body>

et voici le code CSS ou tout se passe :

/*///////////////////////////////////////////////////////////////////
///////////////////////////Ecrant Normal/////////////////////////////
///////////////////////////////////////////////////////////////////*/

@media all and (min-width: 1024px) {
  .header, .corps, .footer {
    margin: 0 auto;
    width: 75%;
  }
  .couleur {
    background-color: #F1F1F1;
  }
  .header{
    background-color: rgb(193, 167, 228);
  }
  .header, .corps, .footer, .article{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .header > div, .corps > div, .footer > div, .article > div{
    flex-grow: 1;
  }

  /*///////////////////////////////////////////////////////////////////
  ///////////////////////////PLACEMENT/////////////////////////////////
  ///////////////////////////////////////////////////////////////////*/

  .logo{flex: 0 0 10%; height: 100px;}
  .menu{flex: 1 1 90%; height: 100px;}
  .slider{flex: 1 1 100%;}
  .article{flex: 1 1 67%;}
  .articleP{flex: 1 1 100%;}
  .bloc3art{flex: 1 1 100%;}
  .vidéo{flex: 1 1 100%;}
  .slidebar{flex: 1 1 33%;}
  .bloc1{flex: 1 1 34%;}
  .bloc2{flex: 1 1 33%;}
  .bloc3{flex: 1 1 33%;}

  /*///////////////////////////////////////////////////////////////////
  ///////////////////////////COULEUR///////////////////////////////////
  ///////////////////////////////////////////////////////////////////*/

  .logo{background-color: rgb(109, 247, 87);}
  .menu{background-color: rgb(196, 162, 165);}
  .slider{background-color: rgb(209, 96, 71);}
  .articleP{background-color: rgb(155, 198, 124);}
  .bloc3art{background-color: rgb(27, 99, 166);}
  .vidéo{background-color: rgb(103, 244, 66);}
  .slidebar{background-color: rgb(185, 190, 223);}
  .bloc1{background-color: rgb(142, 75, 135);}
  .bloc2{background-color: rgb(12, 20, 162);}
  .bloc3{background-color: rgb(10, 207, 80);}

  /*///////////////////////////////////////////////////////////////////
  ////////////////////Modification des éléments////////////////////////
  ///////////////////////////////////////////////////////////////////*/

  .menu ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

}

je pense que ce sont ses deux lignes de code qu'il faut changer :

.logo{flex: 0 0 10%; height: 100px;}
  .menu{flex: 1 1 90%; height: 100px;}

Donc comment faire pour avoir un logo ayant une taille fixe tout en ayant un menu de longueur variable ?

Merci d'avance pour vos réponses et d'avoir prit du temps pour moi

ChrisLebure

18 octobre 2017 à 19:57:45

Bonsoir,

flex est une réponse élégante et simple à la question qui est, si j'ai bien suivi : comment avoir, dans une <div>, un premier élément à gauche de largeur fixe, et un second élément de largeur variable, à savoir occupant tout l'espace restant à droite.

Le conteneur est une flexbox, le logo à une largeur/hauteur de 100px, et le menu est en flex:1 pour le forcer à occuper toute la place dispo.
de plus, on va utiliser pour le parent : align-items, pour centrer les éléments du menu sur l'axe secondaire ( = verticalement)

Rappel : justify-content concerne l'axe principal de la boîte flex (axe horizontal par défaut), et align-items concerne l'axe secondaire (vertical par défaut).
Il est important de comprendre ce système d'axes principal et secondaire dans une flexbox, car ensuite tout s'éclaire et le flex se maîtrise (relativement) facilement

https://www.alsacreations.com/xmedia/guidelines/flexbox-cheatsheet.pdf

Guiguil81

18 octobre 2017 à 20:21:54

Merci de votre réponse, j'ai testé en modifiant les lignes suivante :

.header{
    align-items: center;
  }

.logo{height: 100px; width: 100px;}
  .menu{flex: 1; height: 100px;}

Mais rien n'y fait j'obtient ceci :

Je ne vois vraiment pas comment régler ce problème :/

EmmanuelBeziat

18 octobre 2017 à 20:42:06

Salut,

Plusieurs points quant à ton html :

Utilise les balises sémantiques ; ton menu devrait être une balise <nav>, ton pied de page une balise <footer>, ton contenu principal une balise <main>, ton en-tête une balise <header>, etc.
Inutile de mettre des <p> partout. <p> ne sert pas à "contenir du texte", juste à scinder un bloc de texte en plusieurs paragraphes.
Ton menu n'a pas besoin non plus d'être une liste.

Et pour ce qui est de ne pas utiliser bootstrap, tu as cent fois raison !

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Guiguil81

19 octobre 2017 à 9:57:03

Bonjour, tout d'abord merci pour ta réponse.

Juste par curiosité pourquoi est ce mieux de ne pas utiliser bootstrap ?

Sinon merci pour ses ajustements c'est totalement vrai.

Mais pour en revenir sur mon problème initial je n'arrive toujours pas à trouver de solution :/

Anonyme

19 octobre 2017 à 14:29:44

Hello Guiguil81,

Voici un bout de code qui, je pense, pourra t'aider

fiddle

EmmanuelBeziat

19 octobre 2017 à 14:55:42

Parce que Bootstrap n'est pas fait pour du design. C'est fait pour de l'interface applicative (back-office, etc.).

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

CSS -- flexBox

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

CSS -- flexBox

CSS -- flexBox

Supprimer

Modérer

Signaler le message aux modérateurs