Je souhaite organiser mon pied de page de mon site.

Owona -
Zepines Messages postés 76 Date d'inscription Statut Membre Dernière intervention - 25 janv. 2022 à 01:30

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

Afficher la suite

A voir également:

Je souhaite organiser mon pied de page de mon site.
Site de telechargement - Accueil - Outils
Impossible de supprimer une page word - Guide
Site comme coco - Accueil - Réseaux sociaux
Site de partage de photos - Guide
Quel site remplace coco - Accueil - Réseaux sociaux

1 réponse

Réponse 1 / 1

Zepines Messages postés 76 Date d'inscription Statut Membre Dernière intervention 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.

Owona

Merci pour votre coopération. Mais cela donne un alignement vertical. Je souhaite pourtant avoir un alignement horizontal.

Zepines Messages postés 76 Date d'inscription Statut Membre Dernière intervention 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 :)

Owona > Zepines Messages postés 76 Date d'inscription Statut Membre Dernière intervention

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.

Zepines Messages postés 76 Date d'inscription Statut Membre Dernière intervention 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/

Discussions similaires

C'est quoi le site qui remplace coco chat

Colis en cours de transport vers votre site de livraison ?

Votre réponse

Discussions similaires