Je souhaite organiser mon pied de page de mon site.

Owona -  
Zepines Messages postés 120 Statut Membre -
Bonjour, je veux organiser mon pied de page de mon site qui comprend 4 éléments. Et lorsque je le fais en CSS, tous les quatres éléments s'alignent avec leurs sous éléments. Car je veux que ce soit ainsi :
Contacts support photos médias
-------------- ------------ ----------- ----------
-------------- ------------ ----------- ----------
-------------- ------------ ----------- ----------
-------------- ------------ ----------- ----------
S'ils vous plaît comment faire pour avoir ce résultat ? Si possible un extrait de code semblable pourrai vraiment m'orienter. Merci j'ai des propositions.



Configuration: Android / Chrome 79.0.3945.116
A voir également:

1 réponse

Réponse 1 / 1
Zepines Messages postés 120 Statut Membre 227
 
Bonsoir @Owona,

L'une des solutions serait d'utiliser les flexbox.

Voici à quoi pourrait ressembler le minimum de code : 
<footer id="pfooter">
    <div class="col">
        <h1>Contact</h1>
    </div>
    <div class="col">
        <h1>Support</h1>
    </div>
    <div class="col">
        <h1>Photos</h1>
    </div>
    <div class="col">
        <h1>Médias</h1>
    </div>
</footer>


#pfooter {
  display: flex;
}

#pfooter .col {
  flex-grow: 1;
}


Un excellent guide/mémo sur les flexbox (en anglais): https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bonne soirée, Zepines.
0
Owona
 
Merci pour votre coopération. Mais cela donne un alignement vertical. Je souhaite pourtant avoir un alignement horizontal.
0
Zepines Messages postés 120 Statut Membre 227 > Owona
 
Hm dans ce cas je ne comprend pas trop la demande.

Le code donné plus haut créé 4 colonnes, les éléments de chaque colonne peuvent par la suite être stylisé. Cela ressemble assez bien à l'exemple que tu as donné.

Il faut que chaque élément dans une colonne soit aligné à l'élément de la colonne voisine ?

Par exemple : 
+----------+----------+---------+---------+
| Contact  | Support  | Photos  | Médias  |
+----------+----------+---------+---------+
+----------+----------+---------+---------+
| contact1 | support1 | photos1 | médias1 |
+----------+----------+---------+---------+
+----------+----------+---------+---------+
| contact2 | support2 | photos2 | médias2 |
|          |          |         |         |
+----------+----------+---------+---------+
+----------+----------+---------+---------+
| contact3 | support3 | photos3 | médias3 |
+----------+----------+---------+---------+


Un dessin du résultat que tu souhaite serait le bienvenue :)
0
Owona > Zepines Messages postés 120 Statut Membre
 
Oui exactement c'est ce résultat que je souhaite. Mais j'ai écris ce code et les éléments sont restés aligner verticallement.
0
Zepines Messages postés 120 Statut Membre 227 > Owona
 
À vrai dire j'ai toujours pas trop compris la demande ^^". Du coup j'ai fait un JSFiddle avec le code présenté dans ma première réponse et légèrement modifié pour mieux le présenter. Si c'est la solution que tu cherchais, libre à toi de l'adapter, sinon comme dit plus haut, un petit dessin rapide ou une meilleur explication serait les bienvenue.

Lien du JSFiddle : https://jsfiddle.net/Zepines/9k1u52Lt/4/
0

Discussions similaires

Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
Que signifie ''Votre colis est arrivé sur son site de distribution'' ?
jouhry113 -
georges97 -

27 réponses