Espace vide dans un <li> contenant une image
Résolu
Oluram
Messages postés
73
Statut
Membre
-
Mirzo Messages postés 83 Statut Membre -
Mirzo Messages postés 83 Statut Membre -
Bonjour,
Je cherche à faire une liste de vignettes carrées contenant des photos, et avec une bordure, de cette manière :
http://jsfiddle.net/2Lzowyjp/1/
Mais comme vous pouvez le voir, chaque <li> est plus haut que les images de quelques pixels, ce qui fait que les bordures n'encadrent pas correctement les images.
Avez-vous une idée de ce qui peut causer ça ?
(Je précise que j'ai simplifié le code dans ce jsfiddle pour que ce soit plus clair, mais que j'ai prévu un effet au survol pour faire apparaître un lien, comme ça : http://jsfiddle.net/tk1pm8ny/ D'où les propriétés en commentaire)
Merci d'avance pour votre aide, et bonnes fêtes :)
Je cherche à faire une liste de vignettes carrées contenant des photos, et avec une bordure, de cette manière :
http://jsfiddle.net/2Lzowyjp/1/
Mais comme vous pouvez le voir, chaque <li> est plus haut que les images de quelques pixels, ce qui fait que les bordures n'encadrent pas correctement les images.
Avez-vous une idée de ce qui peut causer ça ?
(Je précise que j'ai simplifié le code dans ce jsfiddle pour que ce soit plus clair, mais que j'ai prévu un effet au survol pour faire apparaître un lien, comme ça : http://jsfiddle.net/tk1pm8ny/ D'où les propriétés en commentaire)
Merci d'avance pour votre aide, et bonnes fêtes :)
A voir également:
- Espace vide dans un <li> contenant une image
- Espace insécable - Guide
- Espace de stockage gmail plein - Guide
- Comment supprimer une page vide sur word - Guide
- Légender une image - Guide
- Image iso - Guide
1 réponse
Bonjour Oluram,
J'ai souvent eu le même problème et j'ai trouvé une petite astuce pour corriger cela. Il suffis de mettre tes images en display block :
Je ne sais pas vraiment ce qui fait que le bloc parent de l'image ne s'adapte pas correctement mais si quelqu'un le sais et passe par là j'en apprendrais un peut plus aussi ;)
--
J'ai souvent eu le même problème et j'ai trouvé une petite astuce pour corriger cela. Il suffis de mettre tes images en display block :
.gallerie li img {
width : 100%;
display:block;
}
Je ne sais pas vraiment ce qui fait que le bloc parent de l'image ne s'adapte pas correctement mais si quelqu'un le sais et passe par là j'en apprendrais un peut plus aussi ;)
--
Il se pourrait donc que ce ne soit pas une erreur/oubli de ma part, mais un défaut inhérent à HTML/CSS ? (comme le "bug" des pixels en trop entre plusieurs <li> disposés en inline/inline-block, qu'on corrige en mettant des commentaires vides entre chaque <li> ?)
En tout cas, merci beaucoup pour la réponse rapide !
Heureux de t'avoir aidé en tous cas :)