28173 sujets

CSS et mise en forme, CSS3

[résolu] Pb de rollover sans css

bonjour à tous
je me suis inspiré du tutorial alsacréations permettant de faire un rollover en css avec une seule image.
le problème c'est que lors du passage de la souris, rien ne se passe Smiley decu
pourriez-vous m'aider svp
merci
voici mon code
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="rollover.css">
<title>miniatures</title>
</head>
<body>	
<div id="B1"
<a href="index.html"></a>
</div>
</body>
</html>

et le css
div#B1
{
  margin :0;
  padding:0;
  }
div#B1 a
{ 
  display:block;
  width: 22px;
  height: 20px;  
  background-image: url(Bmenu.gif);
  background-repeat:no-repeat
  backgrounf-position: 0 0;
  top:0px;
  left:0px;
  padding: 0;
  float:left;
}
div#B1 a:hover
{
 background-image: url(Bmenu.gif);
 background-repeat:no-repeat
 backgrounf-position: 0 -20px;
}

cordialement
Modifié par qmulonainbus (11 Sep 2006 - 19:43)
il te manque un ;

div#B1 a:hover

{

 background-image: url(Bmenu.gif);

 background-repeat:no-repeat[#red][b];[/b][/#]

 backgrounf-position: 0 -20px;

}
exact merci Smiley cligne
il en manquait même 2
mais ça ne fonctionne toujours pas Smiley decu 
div#B1
{
  margin :0;
  padding:0;
  }
div#B1 a
{ 
  display:block;
  width: 22px;
  height: 20px;  
  background-image: url(Bmenu.gif);
  background-repeat:no-repeat;
  backgrounf-position: 0 0;
  top:0px;
  left:0px;
  padding: 0;
  float:left;
}
div#B1 a:hover
{
 background-image: url(Bmenu.gif);
 background-repeat:no-repeat;
 backgrounf-position: 0 -20px;
}

help ^^
Bonjour,

Pour que cela marche, valider ceci (pour éviter la balise incomplète du div) et valider cela (pour éviter le backgrounf)... Smiley cligne

Et pour que cela ait un sens, ne pas faire ces fichus liens vides réduits à un background CSS : ils sont une aberration à tous points de vue (confusion contenu/présentation, inaccessibilité, référencement, etc).
waaa merci beaucoup
j'aurais du prendre du recul ^^
merci pour les liens

désolé pour le liens vide mais c'était pour le test-même
pour me prouver que j'arrivais bien à faire fonctionner ce roll-over !
(enfin si c'est bien celà que tu appelle liens vides)..

;)

ah oui et excuse moi mais qu'entend tu par balise div incomplète? (validation w3c obtenue pr le css..)
Modifié par qmulonainbus (11 Sep 2006 - 18:21)
Pour la balise incomplète, ici:

qmulonainbus a écrit :

voici mon code
html

<div id="B1"



Mais peut-être n'était-ce qu'une erreur au copié collé ou à la copie dans le forum.

Pour le lien vide: <a href="..."></a> n'a pas de contenu (rien entre les deux balises)
Modifié par Laurent Denis (11 Sep 2006 - 18:29)
ok Smiley smile
si tu regarde ma balise div est fermée quelques lignes plus bas dans le script

et le lien n'est pas vide "index.htm"
^^
merci pour les infos
On recommence (mais ce n'est pas grave Smiley cligne ):

<div id="B1" ci-dessus n'a pas de chevron fermant (>)

<a href="index.html"></a> est un lien vide (je ne parle pas du contenu de l'attribut href, mais de l'élément. ici : ></a>)
Avec ceci, tout simplement:

<a href="..."><img src=".." alt="..." /></a>

en veillant à la pertinence de l'alternative textuelle alt qui doit indiquer quelle est la cible/fonction du lien ("accueil", "contact", etc) et en passant par un effet de roll-over via javascript et non via CSS.
Sujet clos
Aller à