3 colonnes footer

santini · juillet 2019

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 :)

Calico_Jack · juillet 2019

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;
   }
}

kowalsky · juillet 2019

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)

santini · juillet 2019

Merci beaucoups !

santini · juillet 2019

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;
}

kowalsky · juillet 2019

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.

santini · juillet 2019

Merci Kowalsky mais sa ne fonctionne pas :s

kowalsky · juillet 2019

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

Calico_Jack · juillet 2019

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. 😉👍️

3 colonnes footer

Réponses