[résolu] Marges fantômes pour les liens images

Bonjour à tous,

voici mon problème : je veux afficher une liste d'émoticônes cliquables dans une div. Le nombre de smileys est dynamique, donc j'opte pour une présentation en float. Chaque image est donc dans un lien qui est dans une div flottante.

Malheureusement, je me rends compte que la balise a rajoute une marge à droite incompressible.

http://ben.lort.free.fr/Bazar/exemple_alsa.png
Voici la vue avec Firebug. En haut, la vue de l'élément div qui contient le lien image. la couleur jaune indique le margin (2px en haut et à gauche), la couleur violette indique le padding (3px partout), et la zone bleue indique le contenu.

En bas, la vue de l'élément a qui contient l'image. Pas de margin ni de padding, la zone bleue est cette-fois ci plus large que l'image (19x19px), on voit bien à droite une marge qui n'a pas lieu d'être.

Voici le HTML :

<div id="smileys_chat">
	<div><a href="#"><img src="http://ben.lort.free.fr/Bazar/10_chat_smiley.png"/></a></div>
	<div><a href="#"><img src="http://ben.lort.free.fr/Bazar/10_chat_smiley.png"/></a></div>
	...
</div>

Et voici les CSS utilisées :

div#smileys_chat {
	padding: 2px 0 0 2px;
}
div#smileys_chat div{
	float: left;
	height: 25px;
	width: 25px;
	padding: 3px;
	margin: 2px 0 0 2px;
	border: 1px solid #D3D498;
	background-color: #D7D89F;
}
div#smileys_chat div a,
div#smileys_chat div a img{
	padding: 0;
	margin: 0;
	display: block;
}

Comment faire pour que l'image remplisse complètement la zone de contenu de la div pour qu'il n'y ait que 3pixels de marge autour de l'image uniformément ?

Merci d'avance.
Modifié par Ertai (12 Aug 2007 - 00:28)

Hello,

Pour commencer, pourquoi utiliser les flottants, alors qu'il suffirait de laisser les images se placer les unes à la suite des autres?

Sinon, je ne crois pas que tu aies une marge à droite de tes images ou liens. Surtout si Firebug te dit que non...
Par contre, tu as des div flottantes avec une largeur de boite de contenu de 25px, largeur à la quelle se rajoute 3px de padding à gauche et 3px de padding à droite. Soit 31px en tout. Même chose pour la hauteur.

L'espace en trop à droite et en bas des images vient donc seulement du fait que tu réserves un espace trop grand (25x25) pour tes images (19x19).

Salut Florent, merci de m'avoir répondu.

Pour les flottants, les images doivent être contenu dans des boîtes 3px plus grandes que les images et cette boîte doit avoir une bordure. Est-ce que je peux le faire uniquement avec des liens image ?

Pour les marges, par contre, je me suis effectivement complètement fourvoyé en indiquant une hauteur et une largeur. En supprimant ces deux attributs, ça fonctionne comme attendu.

Encore merci de ta réponse.

Ertai a écrit :
Pour les flottants, les images doivent être contenu dans des boîtes 3px plus grandes que les images et cette boîte doit avoir une bordure. Est-ce que je peux le faire uniquement avec des liens image ?

Il me semble que oui, avec un peu de padding sur les liens par exemple. À tester. Ensuite, si tu veux que tous les carrés aient exactement les mêmes dimensions, il faut que toutes tes images aient les mêmes dimensions.

Ertai a écrit :
Pour les marges, par contre, je me suis effectivement complètement fourvoyé en indiquant une hauteur et une largeur. En supprimant ces deux attributs, ça fonctionne comme attendu.

Puisque ton problème est [Résolu], n'oublie pas de l'indiquer dans le titre du sujet, sous la forme suivante: «[Résolu] Le titre de mon sujet».
Tu peux modifier ce titre en éditant le premier message du sujet (bouton «Éditer» en haut à droite).