28120 sujets

CSS et mise en forme, CSS3

Li, image et CSS

Bonjour à tous,

J'ai un probleme d'espace en bas d'une li lorsque je mets un image à l'intérieur. J'ai réussi à régler çà avec firefox mais je n'ai pas réussi pour IE. Je précise que je ne peux pas mettre l'image en background parce qu'il y a un lien sur l'image


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
ul, li{margin:0px; padding:0px; margin-bottom:-5px;/*corrige pour firefox*/}
ul{border:1px solid #000000;}
-->
</style>
</head>
<body>
<ul><li><a href=""><img src="mon image.jpg"></a></li></ul>
</body>
</html>


Merci pour votre aide parce que là je suis aux fraises ...
Smiley cligne
Modifié par divine99 (10 Oct 2007 - 14:28)
Peur-être qu'en déclarant :
ul li a img {vertical-align:middle}
ça résoudra ton problème.
Ps : Il est préférable d'externaliser tes déclarations css plutôt que de les mettre dans ta page html.
Modifié par mecho (10 Oct 2007 - 14:59)
Non çà ne marche pas !
J'ai que le probleme sous IE !
En fixant le height du li en rapport avec celui de l'image, sous firefox, çà marche. Smiley decu
divine99 a écrit :

Je précise que je ne peux pas mettre l'image en background parce qu'il y a un lien sur l'image


Bonjour si tu peux, si elle est purement décorative Smiley cligne 


<a href="#" title=""><span></span></a>


a{
display: block;
width: yypx;
height: zzpx;
}

span{
display: block;
width: yypx;
height: zzpx;
background: url(ton_image.jpg);
}


Sinon passe tes images dans le code en display: block cela devrait supprimer l'espace...
Sujet clos
Aller à