28173 sujets

CSS et mise en forme, CSS3

Bonsoir,

Après avoir recherché des solutions possibles sur le forum, je vous avous que je n'en ai pas trouvé pour mon problème.
Je souhaites faire apparaitre une image à droite d'un lien.
Voici mon code actuelle :

<html>

<head>

<style type="text/css">
<!--

a span.picture {
	display: none;
	position:absolute;
	top:auto;
	left:auto;
	margin-left: 5px;
}

a span.picture img {
	border: 0;
}

a:hover span.picture {
	display: inline;
}

-->
</style>

</head>

<body>

<a href="#">dead<span class="picture"><img width="50px" height="50px" src="dead.jpg"/></span></a><br/>
<a href="#">biere<span class="picture"><img width="50px" height="50px" src="biere.jpg"/></span></a><br/>
<a href="#">logo<span class="picture"><img width="50px" height="50px" src="logo.jpg"/></span></a><br/>

</body>

</html>

Code en ligne : http://oxyg3n.free.fr/picsInMenu/

Sous firefox, ça fonctionne comme je le souhaite. Je repasse sous Windows pour voir si IE fait ça bien.. Et ben non ! Peut-être faut-il rajouter un hack pour que IE veuille bien faire ce qu'on lui demande..

Merci d'avance pour votre aide !
Modifié par goozfraba (23 Nov 2006 - 17:27)
J'apportes une petite précision venant de http://meyerweb.com/eric/css/edge/popups/demo2.html :
a écrit :

What's Up With Explorer?

For some reason, IE5.x/Win doesn't handle the dynamic changing of the image size. Apparently, once you set the height and width of an image, it's set that way forever. This doesn't come as too much of a surprise, actually, considering that even if we used the display: none/display: block trick in the SPAN-popup demo, Explorer has trouble. Basically, it will popup each image the first time you roll over a link, but it never goes away. So you get the images to stack up on top of each other, but they don't disappear when you mouse out of the links. You can see an example of this if you're using IE5.x, but don't say I didn't warn you.

Seulement, même sous IE6, ça passe pas, et si je fais un ctrl+a de la page, contrairement à firefox où l'on voit clairement que les images sont présentes, je ne vois que les liens surlignés.

Y a-t-il une réelle solution ? Pas envie de faire ça en JS Smiley decu
Effectivement, je suis passé sur cette page, puis j'ai perdu sa trace.
Cette solution résout un premier problème : les images s'affichent enfin !!
Nouveau problème qui apparait (sous IE bien sûr..) : elles ne veulent plus partir Smiley decu

Merci pour ton aide, en esperant pouvoir résoudre ceci au plus vite !
goozfraba a écrit :

Nouveau problème qui apparait (sous IE bien sûr..) : elles ne veulent plus partir Smiley decu


Pour ma part, je ne remarque aucun problème ni sous IE 6, ni sous IE 7...
Par contre, à titre d'infos, lorsque tu indiques les width et height d'une image dans le code HTML, il ne faut pas préciser les px... Smiley cligne