Je souhaite organiser mon pied de page de mon site.
Owona
-
Zepines Messages postés 120 Statut Membre -
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.
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
1 réponse
-
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.-
Merci pour votre coopération. Mais cela donne un alignement vertical. Je souhaite pourtant avoir un alignement horizontal.
- 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 :) - À 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/
-
