28173 sujets

CSS et mise en forme, CSS3

CSS avec a:hover span

bonjour !
il faudrait qu'au passage de la souris sur une vignette une image plus grande apparaissse ailleurs, en position absolue
Avec NVU, j'ai fait quelque chose qui marche bien avec firefox mais pas avec IE6
pourquoi ?
y-a-t-il une solution ?
Merci !


<html style="direction: ltr;" lang="fr">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Galerie photos </title>
<meta content="Agnes" name="author">
<style title="galerie-photos" media="screen"
type="text/css">
body {
background-color: #003300;
}

#vign1 {
background-color: #003300;
text-align: left;
display: block;
height: 80px;
width: 100px;
float: left;
}

#vign1 a span {
display: none;
}

#vign1 a:hover span {
display: block;
position: absolute;
width: 427px;
height: 320px;
background-image: url(photos/img-01.jpg);
background-color: #ffffcc;
left: 300px;
top: 250px;
background-repeat: no-repeat;
}
</style>
</head>
<body style="color: rgb(0, 0, 0); direction: ltr;"
alink="#ffcc00" link="#333300" vlink="#666600">
<br>
<div id="vign1"><a href="#"><img
style="border: 0px solid ; width: 80px; height: 59px;" alt=""
src="vignettes/vign-01.jpg"><span></span></a></div>
Salut Toupiti,

Une première chose : pourrais-tu encadrer tes portions de code dans les balises prévues à cet effet ?
Cela rendra les choses plus claires et on aura envie de te répondre plus facilement... Smiley smile

Sinon, concernant ton problème, si je ne me trompe pas, il s'agit d'un bug repetorié de IE (un autre Smiley rolleyes ). Je ne vais pas me lancer dans des explications que d'autres font bien mieux que moi Smiley lol mais essaye ceci : 
#vign1 a:hover { background-color: #003300; }


#vign1 a:hover span {
display: block;
position: absolute;
width: 427px;
height: 320px;
background-image: url(photos/img-01.jpg);
background-color: #ffffcc;
left: 300px;
top: 250px;
background-repeat: no-repeat;
}


Voilà... Smiley cligne
merci cygnus, je vais voir ça.

je débute sur le forum, je n'ai pas du commencer par le commencement ...
je ne sais pas ce que tu veux dire par "encadre les portions de code par les balises prévues à cet effet", désolée !
A la prochaine !
Lorsque l'on poste des portions de code (html, css, etc...) il faut que tu l'encadres par les tags 
 Et ca donne ça par exemple
disponible en cliquant sur le bouton [ code] (juste au dessous de la fenêtre de saisie).

Ca permet d'avoir un post plus clair.
Modifié par Raphael (26 May 2006 - 12:55)
Administrateur
toupiti a écrit :
ok, c'est noté !

merci à cygnus, ça marche bien avec la modif qu'il m'a proposée

qu'elle Smiley smile

Tu considères que ce sujet est [Résolu] ? Smiley cligne
Sujet clos
Aller à