Le widget blog d'e-monsite est composé de différents élements qui n'ont pas toujours la même taille et les blocs s'en voient déséquilibrés. EMS Tricks vous montre comment avoir le bouton "Lire la suite" constamment à la même place selon le contenu.
Peu importe le contenu
Le soucis dans la présentation des articles du blog c'est qu'ils dépendent du contenu qu'on met à l'intérieur pour être parfaitement alignés. On est d'accord, compter les mots pour être sur que nos blocs aient la même hauteur est un peu.. pénible? Chez EMS Tricks on a voulu passer au dessus de ça et que tout soit automatisé selon le contenu qu'on y met !
Voici le code CSS :
[data-addon="blog"] .btn-default {
position: absolute;
bottom: 15px;
}
[data-addon="blog"] .media-content {
margin-bottom: 4em;
}
Comment ça agit ?
Pour réaliser ce trick, on définit le bouton en valeur absolue. C'est à dire qu'on le place où on veut qu'il soit dans le bloc (il ne dépend plus du contenu du bloc pour se placer).
Afin que le bouton ne vienne pas devant la description, on met une grosse marge vers le bas au texte. Comme ceci, le texte le plus long poussera au maximum le bloc et le bouton ne sera jamais devant (le texte plus court aura donc une marge qui sera dans le vide).
Envoyez-nous vos sites !
blog articles css webdesign bouton
Articles similaires
Faire apparaître des éléments de la page au scroll
Faire apparaitre des éléments de sa page web au scroll dynamise l'affichage de celle-ci. EMS Tricks vous montre comment faire avec un code très simple à utiliser !
Personnaliser la hauteur du menu de navigation
Après une demande de Matthieu via le formulaire de demande, EMS Tricks vous montre comment personnaliser la hauteur de votre menu de navigation de sites e-monsite !
Ajouter un commentaire
Commentaires
1 Vibration Le 14/09/2018
2 Kévin Le 10/05/2017
Je voulais savoir s'il était possible d'appliquer cette modification de la même façon pour les vignettes des articles dans le menu boutique ?
Merci
3 Damien Le 09/02/2017
Merci pour ce trick qui harmonise très bien le rendu des billets du blog.
J'y ai ajouté une ligne pour le caler à droite "right: 15px;" car je trouve qu'il est plus naturel, pour naviguer vers la suite d'un article, de cliquer sur un bouton en bas à droite du cadre de présentation, plutôt que sur la gauche.
Voici un aperçu du rendu obtenu :
Cordialement,
Damien.