A#.....:hover - rien ne se passe!

Bonjour,

Voilà, si vous allez sur la première page de mon site:
http://mosioatunya.info/savannatours_safaris/index.htm
Vous constaterez que lorsque la souris se place sur "références", menu à droite, placé sur une branche d'une sorte "d'arbre", rien ne se passe. Hors, normalement, je souhaite qu'un fichier .gif se place au survol de cette rubrique au centre du cercle vert , tout en laissant la souris sur la rubrique, enfin réaction au rollover.

J'ai mis le code suivant dans le header:

/*menu arbre*/
#btnref {
position: absolute;
width: 65px;
height: 30px;
left: 77em;
top: 19.3em;
}
a#btnref:hover {
position: absolute;
background: url(./images/ref1.gif);
left: 43em;
top: 23em;
}

Et dans le body:

<img id="btnref" src="./images/btnref.gif"/>
<a id="btnref" href=""></a>

Apparemment, il doit y avoir une erreur, mais laquelle .

Si quelqu'un(e) peut m'éclairer, il/elle serait le/la bienvenu(e) .

Web greetings.
Modifié par koss70 (01 Mar 2006 - 15:22)

koss70 a écrit :
Hors, normalement, je souhaite qu'un fichier .gif se place au survol de cette rubrique au centre du cercle vert , tout en laissant la souris sur la rubrique, enfin réaction au rollover.

a#btnref:hoover {
position: absolute;
background: url(./images/ref1.gif);
left: 43em;
top: 23em;
}

je pense que hoover, c'est une marque d'aspirateur, pas une proprieté CSS

essaie comme ça
#btnref a:hover {
position: absolute;
background: url('/images/ref1.gif');
left: 43em;
top: 23em;
}
Modifié par bideur (28 Feb 2006 - 22:12)

Hello Bideur,

Merci pour la marque d'aspirateur je sais pas où j'avais la tête!!!
J'ai donc remplacé le titre de mon sujet comme tu peux le voir

J'ai remplacé les codes selon ton exemple, mais toujours aucun changement!

#btnref a:hover {
position: absolute;
background: url('/images/ref1.gif');
left: 43em;
top: 23em;
}

Quelqu'un a une autre idée????

Web greetings.

koss70 a écrit :


Apparemment, il doit y avoir une erreur, mais laquelle .

Euh...
en fait c'est plutôt le jeu des sept erreurs ton affaire

. un même id répété deux fois

. img et a enfants direct de body (c'est interdit, il s'agit de balises de type inline et body ne peut être parent direct que balises de types block)

. il manque alt="" width="" height="" à la balise img. Et aussi un espace avant le dernier slash.

. img n'est pas un conteneur (balise auto fermante) et donc ne peut contenir a.

Par contre a est bien un conteneur et pourrait très facilement contenir img...

... Ce qui devrait t'amener à la solution dans un délai très bref

Merci de ta réponse clb56!

J'ai fait du mieux que j'ai pu en fonction de tes remarques (sans uploader le fichier sur le net):

/* dans le header */
btnref a:hover {
position: absolute;
background: url('/images/ref1.gif');
left: 43em;
top: 23em;
}

/* dans body */
<div>
<a id="btnref" href=""><img src="./images/btnref.gif" width="65px" height="30px" alt="references" /></a>
</div>

Mais....

J'ai certainement pas bien compris ce que tu m'as dit! Suis pas encore une experte sur CSS... j'apprend

Web greetings.

J'ai modifié le code dans body comme suit:

<div id="btnref">
<dt onmouseover="javascript:montre();"><a href="#"><img src="./images/btnref.gif" width="65px" height="30px" alt="references" /></a></dt>
</div>

Pour le header je n'ai rien changé. Mais toujours et encore

Web greetings.

Bon, j'ai encore modifié comme suit:

#btnref { /* c'est le btn "références" */ 
position: absolute; 
width: 65px; 
height: 30px; 
left: 77em; 
top: 19.3em; 
} 
a btnref:hover { /* c'est ce qui doit apparaître au rollover mais tout en laissant le btnref */ 
display: block;
position: absolute; 
background-image: url('./images/ref1.gif'); 
left: 43em; /* doit apparaître dans le cercle donc pas à la même place que btnref */
top: 23em; 
}

Et dans body:

<div id="btnref">
<a href=""><img src="./images/btnref.gif" width="65px" height="30px"/></a>
</div>

Mais rien ne se produit
J'en peux plus d'avoir tout essayé
Tout mon site repose sur ce genre de codes

J'ai vraiment besoin d'aide

Excuse moi koss70, mais vu comment tu manies les css (c'est un peu folklorique en fait) je crains vraiment que ce que tu cherches à obtenir ne soit trop difficile pour ton niveau.
Tu devrais sans doute viser des projets plus simples et légers et te plonger à fond dans la consultation et les tutoriaux.

Au passage il y a une liste de ressources vraiment très intéressantes dans ce post du salon "Standards : Ressources et discussions de fond"

C'est à la fois amusant et navrant!

Déjà l'année dernière, j'avais essayé de faire un projet (que j'ai finalisé) en vous demandant de l'aide et le résultat ne fut pas concluant, bref, à peu près le même discours!
Bon, cette année, je me suis dit

a écrit :
"Allez, remet toi au CSS et demande de l'aide à alsa si besoin est....

De nouveau, j'ai la même réaction.....

Bien sur que je lis les tutos, j'ai même des bouquins sur le CSS, j'apprend et ce n'est pas chose aisée que de persévérer encore et encore.
Mais j'attendais des conseils de votre part, que vous m'appreniez en complément de vos tutos à comprendre et analyser les codes.
Mais apparemment, vous ne ciblez que des expérimentés

Enfin, je ne désespere pas et je continuerai à chercher la solution.... mais j'aurais vraiment souhaité que vous ayez un autre comportement

Je crois que tu oublies la 1ère partie de la phrase :

a écrit :

Tu devrais sans doute viser des projets plus simples et légers

Je sais que pour un projet comme le tien je pourrais m'y coller mais simplement par esprit ludique pour voir comment tout celà se boutique mais en étant parfaitement conscient de

1. le peu d'utilité de la machine à gaz que cela génère.
2. les risques importants que cela peut entrainer si tout n'est pas soigneusement controlé (je pense bien sur à l'accessibilité).

Sinon par rapport à la façon dont tu exprimes tes éléments/sélecteurs/class/id :

Si html =

<div id="btnref">

<a href=""><img src="./images/btnref.gif" width="65px" height="30px" /></a>
/* avec un espace avant le slash final et un texte alternatif alt="..." !*/
</div>

Alors le moyen d'attribuer des propriétés/valeurs css pour le survol du a concerné est :

div#btnref a:hover {
propriété:valeur(s);
}

Mais je suis surpris qu'il faille te le préciser.

Salut Koss70,

Quelques pistes histoire quand même que tu ne lâches pas l'affaire, mais compte-tenu de tes connaissances apparentes, tu as effectivement du pain sur planche.

Avant toute chose, il y a des problèmes de conception sur ta page, et tu devrais peut-être repenser un peu l'ensemble en séparant bien le contenu de la mise en forme et de la mise en page.

Mais en supposant que tu partes en l'état et en cherchant simplement à obtenir ton effet de rollover décalé sur ton <a> :

- Ton <a> ne suffira pas à faire l'effet que tu souhaites, car si tu le déplaces au moment où tu le survoles...du coup tu ne le survoles plus et là ça va clignoter méchament à l'écran. De plus, en déplaçant le <a> tu déplaces tout ce qui est dedans, donc l'image du bouton.

- Attention aux coordonnées du positionnement, c'est ton conteneur qui sert de référence, donc le <div>

- Il te faut donc introduire un autre élément à l'intérieur, si possible en respectant la hierarchie des éléments, et pour ton cas <img> est un bon candidat.

- De plus, il faudra gérer le fait qu'il apparaisse bien en avant-plan et pas derrière le texte du rond central.

Evidemment, je ne parle pas de la compatibilité entre navigateurs (IE) et tout ça tout ça (accessibilité et j'en passe) qui font que de toute façon ta conception devra être tip top pour que ça marche.

Bon courage, et ne te formalise pas pour les remarques qui t'ont été faites, quand on veut faire du positionnement et introduire du dynamisme en utilisant CSS au lieu de faire seulement de la mise en forme, être expérimenté est un minimum.

Bonsoir Nilpohc,

Merci pour ton mail réconfortant .

Je prend bonne note de tes remarques.... après une bonne nuit de sommeil, car à force de chercher, de tourner en rond, je ne tiens plus vraiment devant mon écran .