28114 sujets

CSS et mise en forme, CSS3

[Résolu] Fixer ancre en bas de son conteneur

upload/1700557013-86220-captureecranpetitesannonces1.png Bonjour,

J'ai une page qui affiche un ensemble de petites annonces sous la forme d'une grille. Chaque annonce est une carte avec une image, un titre, un texte court et un lien vers le détail de cette annonce. Mon problème est que je voudrais fixer le lien en bas de chaque carte mais je ne sais pas comment faire. J'ai essayé avec "position:absolute" sur le lien et "position:relative" sur le container du lien mais le lien chevauche le texte parfois.

Pouvez-vous me dire comment faire ?
Modifié par lilou256 (21 Nov 2023 - 09:57)
Modérateur
Bonjour,

Ça peut dépendre du reste de ton code. Mais tu peux :
1) Mettre le conteneur en "position:relative;" comme tu l'as déjà fait,
2) Mettre un padding-bottom sur le conteneur assez grand pour que le lien ait assez de place pour s'afficher (par exemple "padding-bottom: 2em;"),
3) Mettre le lien en "position:absolute;" comme tu l'as déjà fait,
4) Positionner le lien en lui mettant les propriétés css "left: 0;" et "bottom: 0;" (et éventuellement remplacer les 0 par des valeurs de quelques fractions d'em pour que le lien ne soit pas coller au cadre de ton annonce si elle en a un).

EDIT: je vois que tu as rajouté une image. Tes liens étant centrés, il ne faut pas utiliser "left: 0;" bien évidemment, mais tout autre moyen permettant de centrer horizontalement le lien.

Amicalement,
Modifié par parsimonhi (21 Nov 2023 - 10:06)
Bonjour,

avec flexbox dans les 'card' et 'margin-auto' dans le 'footer'.

je pense que ce serait egalement possible avec grid mais je ne connais pas assez. 


main{
    display: flex;
    justify-content: center;
    gap: 20px;
    text-align: justify;
}

.card{
    display: flex;
    flex-direction: column;
    justify-content: start;
    min-height: 300px;
    width: 200px;
    background-color: beige;
}

.footer{
    background-color: olivedrab;
    text-align: center;
    margin-top: auto;
}
Meilleure solution
Très bien merci pour votre réponse. J'ai essayé et ça marche très bien.
Modifié par lilou256 (04 Dec 2023 - 16:06)
Prévenir un modérateur
Répondre au sujet
Aller à