3 colonnes footer

santinisantini Membres

Bonsoir,

Je voudrais avoir 3 colonnes dans le footer, mais a force de modifier le code j'ai tout défoncer :( j'aimerai un espace entre chaque bloc et que le tout s'étale sur toute la largeur de la page avec 3 bloc de la meme taille.

Si vous pouviez m'aider svp

Peut-être que l'un d'entre vous à un code plus propre et fonctionnel?

FOOTER.PHP

<?php if (!defined('PLX_ROOT')) exit; ?>

    <div id="footer">

      <h2>Cum sociis natoque...</h2>

      <p><strong>Etiam</strong> habebis sem dicantur...</p>

      <p><strong>Vivamus</strong> sagittis lacus vel...</p>

      <p><strong>Petierunt</strong> uti sibi concilium...</p>

    </div>

  </div>

</body>

</html>

STYLE.CSS

@media screen and (min-width:768px) {
  #footer {
    width: auto;
    -webkit-columns: 3 auto;
    -moz-columns: 3 auto;
    columns: 3 auto;
    -webkit-column-gap: 33%;
    -moz-column-gap: 33%;
    column-gap: 33%;
    -webkit-column-rule: 1px solid #000;
    -moz-column-rule: 1px solid #000);
    column-rule: 1px solid #000;
  }
  #footer p {
    margin: 0;
    background-color: #dedede;
    break-before: column;
  }
  #footer h2 {
    column-span: all;
    -webkit-column-span: all;
  }
}

En vous remerciant :)

Réponses

  • Calico_JackCalico_Jack Membres
    8 juil. modifié

    Bonjour,

    voici une méthode possible. Plus court et fonctionne sur de vieux navigateurs. S'il y a d'autres éléments après les balises <p> il faudra penser à faire un clear du float:left.

    Si tu n'aimes pas composer avec des float, il y a d'autres méthodes avec table-cell, ou plus récentes. À toi de voir 😉

    @media screen and (min-width:768px) {
      #footer {
        width: auto;
      }
      #footer p {
        width: 32%;
        float:left;
        display: inline-block;
        margin-right: 2%;
        background-color: #dedede;
      }
      #footer p:last-of-type {
        margin-right:0;
       }
    }
    
  • kowalskykowalsky Membres

    Bonjour santini,

    une solution simple si tu utilises PluCSS, le framework CSS par défaut de PluXml : les grilles :) https://plucss.pluxml.org/#grid

    <?php if (!defined('PLX_ROOT')) exit; ?>
    
    <div id="footer">
    
      <div class="grid">
        <div class="col sml-12 med-4 lrg-4">
            <h2>Cum sociis natoque...</h2>
            <p><strong>Etiam</strong> habebis sem dicantur...</p>
            <p><strong>Vivamus</strong> sagittis lacus vel...</p>
            <p><strong>Petierunt</strong> uti sibi concilium...</p>
        </div>
        <div class="col sml-12 med-4 lrg-4">
            <h2>Cum sociis natoque...</h2>
            <p><strong>Etiam</strong> habebis sem dicantur...</p>
            <p><strong>Vivamus</strong> sagittis lacus vel...</p>
            <p><strong>Petierunt</strong> uti sibi concilium...</p>
         </div>
         <div class="col sml-12 med-4 lrg-4">...</div>
           <h2>Cum sociis natoque...</h2>
           <p><strong>Etiam</strong> habebis sem dicantur...</p>
           <p><strong>Vivamus</strong> sagittis lacus vel...</p>
           <p><strong>Petierunt</strong> uti sibi concilium...</p>
        </div>
      </div>
    
     </div>
    </div>
    </body>
    </html>
    

    Nota : sur un écran avec faible résolution, les 3 colonnes seront l'une en dessous de l'autre en prenant tout la largeur disponible (sml-12), mais dès que la résolution augmente, les 3 colonnes s'afficheront comme tu le veux (med-4 et lrg-4)

  • santinisantini Membres

    Merci beaucoups !

  • santinisantini Membres

    Apres plusieurs essai le footer ces retrouver au niveau du header, donc j'ai bidouiller du code, j'ai bien mais 3 colonne qui s'affiche mais la 3eme colonne (de droite) et décaler a droite et en bas par rapport au deux première... ou est ce que j'ai foirer dans le css ? MERCI :)

    FOOTER.PHP

    <?php if (!defined('PLX_ROOT')) exit; ?>
    
    
    <footer class="footer w100" role="contentinfo">
    	<div id="column1">Gauche</div>
    	<div id="column2">Centre</div>
    	<div id="column3">Droite</div>
    </footer>
    
    
    </div>
    
    
    </body>
    </html>
    

    CSS

    .footer {
    float: left;
    clear: both;
    text-align: left;
    background-color: #ffffff;
    margin-top: 3%;
    padding: 1%;
    font-weight:bold;
    overflow:hidden;
    }
    
    
    .footer p {
    font-size: 0.85em;
    line-height: 1.5em;
    margin: 0 auto;
    }
    
    
    #column1{
    	float:left;
    	background-color: blue;
            width:30%;
            overflow:hidden;
            height: 150px;
    }
    
    
    #column2{
            float:center;
    	background-color: red;
            width:30%;
            overflow:hidden;
            height: 150px;
    }
    
    
    #column3{
            float:right;
    	background-color: green;
            width:30%;
            height: 150px;
    }
    
  • kowalskykowalsky Membres
    9 juil. modifié

    Il doit y avoir des "float" en trop. Au moins une des colonnes ne doit pas en avoir pour qu'elle soit la colonne de référence sur laquelle tu alignes les autres.

  • santinisantini Membres

    Merci Kowalsky mais sa ne fonctionne pas :s

  • kowalskykowalsky Membres

    As-tu essayé la solution avec les grid de PluCSS ? (en ayant auparavant désactivé tes modifications dans style.css, sinon y'aura conflit)

  • Santini, la propriété float:center n'existe pas, sont possibles : none / left / right / inherit / initial. La propriété float positionne un élément à gauche ou à droite de son conteneur. Les éléments comme le texte ou en ligne viendront ensuite entourer l'élément flottant.

    Je pense que la solution donnée par Kowalsky est la bonne, si tu n'es pas à l'aise avec tout ça, les grilles de PluCSS sont très pratiques à mettre en œuvre. 😉👍️

Connectez-vous ou Inscrivez-vous pour répondre.