Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Problème de style css avec a:hover

5 réponses
Avatar
Tr
Bonjour à tous,
sur cette page:
http://testxav01.free.fr/index.htm
lorsqu'on survole une image en haut, on devrait avoir une image grisée,
qui reste lorsqu'on clique.
ça marche pour les 5 dernières vignettes, pas pour les deux premières à
gauche.
la première ne charge pas la bonne image de fond lors d'un click dessus
(a:active) et laisse la mauvaise image pour a:focus, alors que a:hover
ça va.
la seconde ne met pas l'image grisée pour a:focus...
je n'arrive pas à voir l'erreur, ceci avec FF, puisqu'avec IE6 ça
fonctionne...
merci à tous pour les pistes que vous allez me donner.

--
Finalement, la démagogie, c'est quand on n'est pas sincère. Parce que
si on est sincère, hein... (à votre avis)
tranquille.xav@free.fr

5 réponses

Avatar
Florian Sinatra
Notre cher _MIMATA_ a joyeusement tapoté le 09/02/2006 19:14 :
Bonjour,

3 p'tites questions :

- Intéressant ce petit bout de css...mais j'imagine que ça coince au
validateur non ?


Absolument, en ce qui concerne les filter (IE propriétaire) et les
propriétés préfixées par "-" qui sont toujours propriétaires (Mozilla et
KHTML dans notre cas). Ce sont des préimplantations de la propriété
opacity, qui est apparue avec CSS3. Ainsi, en validant la feuille en
CSS3, cette propriété sera valide. On peut néanmoins tricher avec PHP
pour ne pas envoyer de propriétés propriétaires (sic).

- Est-ce que ce code fonctionne avec tous les navigateurs ? (je crois avoir
vu quelqu'un dire que ça ne marchait pas sur IE mac) Peut-on trouver une
liste des navigateurs supportés ?


* IE | filter: alpha(opacity=) Seulement en position absolue
* Mozilla | -moz-opacity Pas de problèmes
* KHTML | -khtml-opacity Pas testé
* Opera | Fonctionne pas (8.51)
* Tous les navigateurs implémentant CSS3.

- Si ça ne fonctionne pas, que se passe-t-il ? L'image reste telle qu'elle
est ?


Absolument.
Avatar
ASM
MIMATA a écrit :
"ASM" a écrit dans le message
de news: 43eb5e59$0$29218$

a:hover {
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacityP);
}
a:focus {
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacityp);
}




Bonjour,

3 p'tites questions :

- Intéressant ce petit bout de css...mais j'imagine que ça coince au
validateur non ?



oui (il est d'un bête ce validator !)

voir fil "Négotiation de contenu (fut Re: Centrer float:left)"
http://groups.google.com/group/fr.comp.infosystemes.www.auteurs/msg/4b82bd94abb001ed?rnum=1
pour comment passer outre

On détecte si le navigateur est le validator
si oui
on lui cache ces règles :-)

- Est-ce que ce code fonctionne avec tous les navigateurs ?



Non (par exemple : NC4.5)

(je crois avoir vu quelqu'un dire que ça ne marchait pas sur IE mac)



:-) j'm'demande bien qui a pu dire çà !

Peut-on trouver une
liste des navigateurs supportés ?



parmi ceux non supportés : iCab, Safari<1.3, IE Mac, IE Win <5.5, Opera 8.0.1
parmi ceux supportés : FireFox, Safari>=1.3

- Si ça ne fonctionne pas, que se passe-t-il ? L'image reste telle qu'elle
est ?



comme d'hab : pas connu -> pas interprété (oui l'image reste telle que)


--
Stephane Moriaux et son [moins] vieux Mac
Avatar
Tr
*Ecrit* *par* *ASM*:
a écrit :
*Ecrit* *par* *ASM*:
pourquoi çà bougerait-y ?
si tu as prévu une largeur d'affichage suffisante pour
toutes les images du menu.



quand je réduisais ma fenêtre de nav, le menu des vins s'alignait en
dessous si la lergeur de la page n'était pas assez importante.



il suffit de dimensionner le body



tiens, je ne savais pas qu'on pouvait dimensionner un body...

ou le div conteneur
pour que ttes les images y entre en une seule ligne.




bon ok.
mais je me pose des questions:
quel est l'avantage de mettre relative plutôt qu'absolute, surtout si
je souhaite une position bien précise?
pourquoi mettre float, pareil, si je veux une position fixe ?

(si c'est le div conteneur qui a une largeur, on peut en plus le centrer)
(bien sûr : il n'est pas positionné en absolute !)

c'est vrai, je pré-suppose, ce qui n'est pas forcément une bonne idée, que
l'affichage du client est au mini en 1024*768...



pour le moment, suis pas sûr que j'ai regardé en aussi grand que 800/600

me manquait que le -khtml...



çà c'est au cas où ... peut-être Konkeror s'en sert ?




ça ne fonctionne pas avec konqueror 3.4.0-5 Red Hat ...

en tout cas ça marche bien, alors que l'image est en fond... d'un <a>
merci, je continue.



bien vérifier avec IE6
(possibles pbs sur les liens et/ou float)




c'est ok avec ie6

(IE mac ne connait aucun opacificateur)



dommage pour eux ;-)
du coup si je repasse avec une image transparente pour eux, autant le
laisser pour tous...
putain, c'est galère ces navigateurs à chacun leur sauce...
est-ce que sur mac il existe un nav qui prend en compte cette
propriété?

--
L'amour est un rapport de force qui a trouvé son équilibre. (Réflexion)

Avatar
ASM
a écrit :

est-ce que sur mac il existe un nav qui prend en compte cette propriété?



Oui -> le navigateur par défaut livré avec le Mac : Safari
(si on a le système 10.3.9 au minimum, crois-je)

Normalement, IE n'est plus utilisé sur Mac.

--
Stephane Moriaux et son [moins] vieux Mac
Avatar
Tr
*Ecrit* *par* *ASM*:
a écrit :

est-ce que sur mac il existe un nav qui prend en compte cette propriété?



Oui -> le navigateur par défaut livré avec le Mac : Safari
(si on a le système 10.3.9 au minimum, crois-je)

Normalement, IE n'est plus utilisé sur Mac.



super :-)

--
Va au bout. (Etat d'esprit)