28172 sujets

CSS et mise en forme, CSS3

Bonjour

J'ai un petit souci d'une image sur une liste à puces :

<style type="text/css">
<!--
.Marge {
	background-color:#ad54cf;
	margin: 0px;
	padding: 0px;
	list-style: none;
	height:146px;
}
-->
</style>

<ul>
<li class="Marge"><img src=".image.jpg" alt="" width="342" height="146" border="0" /></li>
</ul>


Ma couleur de fond dépasse de qq pixels sous mon image (cf copie écran) sur IE (ok sous FireFox).
Il n'y a rien de compliqué mais je ne comprends pas !

Vous avez une idée svp ? upload/16796-copie.jpg
Bonjour,

Voir la FAQ, «espaces indésirables sous les images».

Mais tu aurais peut-être intérêt à passer cette image en image de fond du LI (et utiliser du padding qui va bien).
Bonjour,

Je peux t'orienter avec ma proposition.

je te conseille déja de faire un "reset" de quelques valeurs pour remettre à 0 les marges des navigateurs .


<style type="text/css">

<!--

* {
       padding:0px;
       margin:0px;
}

.Marge {

	background-color:#ad54cf;

	margin: 0px;

	padding: 0px;

	list-style: none;

	height:146px;

}

-->

</style>



dit moi si cela marche , autrement on continue.
merci Florent, la FAQ a répondu à mes questions Smiley smile

Et pour savoir, si je mets cette image en fond de mon LI, je ne pourrais pas avoir de lien dessus ?
freelance28 a écrit :
Et pour savoir, si je mets cette image en fond de mon LI, je ne pourrais pas avoir de lien dessus ?

Bah déjà ton image est décorative, a un attribut alt vide, et donc faire un lien spécifiquement sur cette image serait une aberration.

Maintenant, si tu as un texte à côté de l'image et que tu souhaites que le lien porte sur le texte et sur l'image, tu peux passer ton lien en display: block et placer l'image en fond du lien plutôt qu'en fond du LI.