Donc je fais des tests de Rollover en CSS et je rencontres un probleme
Sur cette page, j'ai fait uniquement le rollover sur la case "Services"
http://test.elite-grafx.com/elite/
Je n'arrives pas a comprendre sur Firefox et Mozilla pourquoi il me pourrit
le Rollover comme ca.
De plus, si vous avez des suggestions pour simplifier le code du Rollover
elles sont bienvenues car je trouves ce que j'ai fait un peu complexe et je
suis sur que les pros du CSS vont me donner de bons conseils !
In article <4215f06d$, "Christophe - Elite grafx SARL" wrote:
De plus, si vous avez des suggestions pour simplifier le code du Rollover elles sont bienvenues car je trouves ce que j'ai fait un peu complexe et je suis sur que les pros du CSS vont me donner de bons conseils !
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en mettre deux dans la feuille de style, une par défaut et une en hover
In article <4215f06d$1_2@news.tiscalinet.ch>,
"Christophe - Elite grafx SARL" <christopheREMOVETHIS@elite-grafx.com>
wrote:
De plus, si vous avez des suggestions pour simplifier le code du Rollover
elles sont bienvenues car je trouves ce que j'ai fait un peu complexe et je
suis sur que les pros du CSS vont me donner de bons conseils !
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en
mettre deux dans la feuille de style, une par défaut et une en hover
In article <4215f06d$, "Christophe - Elite grafx SARL" wrote:
De plus, si vous avez des suggestions pour simplifier le code du Rollover elles sont bienvenues car je trouves ce que j'ai fait un peu complexe et je suis sur que les pros du CSS vont me donner de bons conseils !
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en mettre deux dans la feuille de style, une par défaut et une en hover
Christophe - Elite grafx SARL
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Donc désolé, ta solution n'est pas la bonne
Christophe
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en
mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a
désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens
qui seront des images background dans ta solution. De plus, si le visiteur
imprime la page et qu'il n'as pas activé l'option pour imprimer les
backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille
imprimé.
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Donc désolé, ta solution n'est pas la bonne
Christophe
Kawai
Christophe - Elite grafx SARL avait écrit le 18/02/2005 :
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Donc désolé, ta solution n'est pas la bonne
Christophe
pour resoudre le pb sous firefox il faut ajouter : display : block; margin-right: 1px; float: left; dans .roll_services.
apres pour la question de la methode, il est vrai que celle que tu as utilisé est lourde.
voici comment je ferais moi (et ça evite les pb d'impression de bg):
pas d'image qui fait toute la hauteur et toute la largeur du block, pas de bg en image non plus juste une image gif(voire png24 mais pour des raisons evidentes il vaut mieux eviter ce format) transparente pour le mot service. et dans le hover du block tu changes juste la couleur du fond du <A> sans changer d'image..
-- Kawai ^^ "Si on ne trouve pas de solution à un problème, c'est que le problème n'existe pas vraiment."
http://kawaitld.free.fr
Christophe - Elite grafx SARL avait écrit le 18/02/2005 :
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en
mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a
désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens
qui seront des images background dans ta solution. De plus, si le visiteur
imprime la page et qu'il n'as pas activé l'option pour imprimer les
backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille
imprimé.
Donc désolé, ta solution n'est pas la bonne
Christophe
pour resoudre le pb sous firefox il faut ajouter : display : block;
margin-right: 1px; float: left; dans .roll_services.
apres pour la question de la methode, il est vrai que celle que tu as
utilisé est lourde.
voici comment je ferais moi (et ça evite les pb d'impression de bg):
pas d'image qui fait toute la hauteur et toute la largeur du block, pas
de bg en image non plus juste une image gif(voire png24 mais pour des
raisons evidentes il vaut mieux eviter ce format) transparente pour le
mot service. et dans le hover du block tu changes juste la couleur du
fond du <A> sans changer d'image..
--
Kawai ^^
"Si on ne trouve pas de solution à un problème,
c'est que le problème n'existe pas vraiment."
Christophe - Elite grafx SARL avait écrit le 18/02/2005 :
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Donc désolé, ta solution n'est pas la bonne
Christophe
pour resoudre le pb sous firefox il faut ajouter : display : block; margin-right: 1px; float: left; dans .roll_services.
apres pour la question de la methode, il est vrai que celle que tu as utilisé est lourde.
voici comment je ferais moi (et ça evite les pb d'impression de bg):
pas d'image qui fait toute la hauteur et toute la largeur du block, pas de bg en image non plus juste une image gif(voire png24 mais pour des raisons evidentes il vaut mieux eviter ce format) transparente pour le mot service. et dans le hover du block tu changes juste la couleur du fond du <A> sans changer d'image..
-- Kawai ^^ "Si on ne trouve pas de solution à un problème, c'est que le problème n'existe pas vraiment."
http://kawaitld.free.fr
Hervé Cauwelier
Christophe - Elite grafx SARL wrote:
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution.
Le problème d'accessibilité est de ton côté : c'est toi qui rend la page inaccessible en remplaçant les liens par des images. Je te confirme que ces images sont de la décoration, elles ne font pas partie du contenu.
D'ailleurs c'est possible de désactiver les images de fond ? Si tu parles de toutes les images, le problème est identique quelle que soit la solution.
De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Quel intérêt d'imprimer une telle page ? Mais s'il se rend compte de son erreur et tient vraiment à gâcher du papier et de l'encre, il activera l'impression des fonds.
-- Hervé Cauwelier http://www.oursours.net/
Christophe - Elite grafx SARL wrote:
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a
désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens
qui seront des images background dans ta solution.
Le problème d'accessibilité est de ton côté : c'est toi qui rend la page
inaccessible en remplaçant les liens par des images. Je te confirme que
ces images sont de la décoration, elles ne font pas partie du contenu.
D'ailleurs c'est possible de désactiver les images de fond ? Si tu
parles de toutes les images, le problème est identique quelle que soit
la solution.
De plus, si le visiteur
imprime la page et qu'il n'as pas activé l'option pour imprimer les
backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille
imprimé.
Quel intérêt d'imprimer une telle page ? Mais s'il se rend compte de son
erreur et tient vraiment à gâcher du papier et de l'encre, il activera
l'impression des fonds.
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution.
Le problème d'accessibilité est de ton côté : c'est toi qui rend la page inaccessible en remplaçant les liens par des images. Je te confirme que ces images sont de la décoration, elles ne font pas partie du contenu.
D'ailleurs c'est possible de désactiver les images de fond ? Si tu parles de toutes les images, le problème est identique quelle que soit la solution.
De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Quel intérêt d'imprimer une telle page ? Mais s'il se rend compte de son erreur et tient vraiment à gâcher du papier et de l'encre, il activera l'impression des fonds.
-- Hervé Cauwelier http://www.oursours.net/
Raphaël Wils
Christophe - Elite grafx SARL wrote:
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Donc désolé, ta solution n'est pas la bonne
Christophe
A priori je l'expliquerai ainsi ceci : le hover du <a> se fait lorsque le souris survole le contenu. Quand le hover se produit, l'<img> contenue disparait, c'est spécifiée dans ta css. Et comme il il n'y a plus de contenu il n'y a plus de hover donc l'image réapparait. Le moteur de rendu recalcule tout cela à chaque pas de déplacement de souris (j'ignore les termes techniques exactes, excusez moi).
Solution simple : mettre un javascript betement pour remplacer l'image par une autre (attention à précharger l'image).
Sinon j'ai une petite remarque : le alt des images devrait correpondre au texte contenu dans ces images rien de plus, rien de moins.
-- Raphaël http://www.r-wils.com « Don't mean a thing if you ain't got that swing ! »
Christophe - Elite grafx SARL wrote:
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en
mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a
désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens
qui seront des images background dans ta solution. De plus, si le visiteur
imprime la page et qu'il n'as pas activé l'option pour imprimer les
backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille
imprimé.
Donc désolé, ta solution n'est pas la bonne
Christophe
A priori je l'expliquerai ainsi ceci : le hover du <a> se fait lorsque
le souris survole le contenu. Quand le hover se produit, l'<img>
contenue disparait, c'est spécifiée dans ta css. Et comme il il n'y a
plus de contenu il n'y a plus de hover donc l'image réapparait. Le
moteur de rendu recalcule tout cela à chaque pas de déplacement de
souris (j'ignore les termes techniques exactes, excusez moi).
Solution simple : mettre un javascript betement pour remplacer l'image
par une autre (attention à précharger l'image).
Tout est à refaire: il ne faut mettre aucune image dans le HTML et en mettre deux dans la feuille de style, une par défaut et une en hover
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Donc désolé, ta solution n'est pas la bonne
Christophe
A priori je l'expliquerai ainsi ceci : le hover du <a> se fait lorsque le souris survole le contenu. Quand le hover se produit, l'<img> contenue disparait, c'est spécifiée dans ta css. Et comme il il n'y a plus de contenu il n'y a plus de hover donc l'image réapparait. Le moteur de rendu recalcule tout cela à chaque pas de déplacement de souris (j'ignore les termes techniques exactes, excusez moi).
Solution simple : mettre un javascript betement pour remplacer l'image par une autre (attention à précharger l'image).
Sinon j'ai une petite remarque : le alt des images devrait correpondre au texte contenu dans ces images rien de plus, rien de moins.
-- Raphaël http://www.r-wils.com « Don't mean a thing if you ain't got that swing ! »
Mac Larinett
In article <4215f6ed$, "Christophe - Elite grafx SARL" wrote:
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Donc désolé, ta solution n'est pas la bonne
Faux, l'image de fond n'est pas le lien: pour l'accessibilité il te faut simplement mettre un texte avec un display:none, il sera visible avec un navigateur textuel comme Lynx. Pour l'impression tu n'as qu'à définir une feuille de style spécifique.
In article <4215f6ed$1_2@news.tiscalinet.ch>,
"Christophe - Elite grafx SARL" <christopheREMOVETHIS@elite-grafx.com>
wrote:
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a
désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens
qui seront des images background dans ta solution. De plus, si le visiteur
imprime la page et qu'il n'as pas activé l'option pour imprimer les
backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille
imprimé.
Donc désolé, ta solution n'est pas la bonne
Faux, l'image de fond n'est pas le lien: pour l'accessibilité il te faut
simplement mettre un texte avec un display:none, il sera visible avec un
navigateur textuel comme Lynx. Pour l'impression tu n'as qu'à définir
une feuille de style spécifique.
In article <4215f6ed$, "Christophe - Elite grafx SARL" wrote:
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
Donc désolé, ta solution n'est pas la bonne
Faux, l'image de fond n'est pas le lien: pour l'accessibilité il te faut simplement mettre un texte avec un display:none, il sera visible avec un navigateur textuel comme Lynx. Pour l'impression tu n'as qu'à définir une feuille de style spécifique.
Christophe - Elite grafx SARL
pour resoudre le pb sous firefox il faut ajouter : display : block; margin-right: 1px; float: left; dans .roll_services.
Oui effectivement, ca a resolu mon souci. Merci beaucoup pour ca car ca fesais au moins 1h30 que je tournais en rond.
voici comment je ferais moi (et ça evite les pb d'impression de bg):
pas d'image qui fait toute la hauteur et toute la largeur du block, pas de bg en image non plus juste une image gif(voire png24 mais pour des raisons evidentes il vaut mieux eviter ce format) transparente pour le mot service. et dans le hover du block tu changes juste la couleur du fond du <A> sans changer d'image..
J'y avais pensé aussi, mais j'avais peur pour la qualité de la transparance du gif donc j'avais laissé tomber... Si j'ai du temps je m'y amuserait peut etre.
merci pour tout
Christophe
pour resoudre le pb sous firefox il faut ajouter : display : block;
margin-right: 1px; float: left; dans .roll_services.
Oui effectivement, ca a resolu mon souci. Merci beaucoup pour ca car ca
fesais au moins 1h30 que je tournais en rond.
voici comment je ferais moi (et ça evite les pb d'impression de bg):
pas d'image qui fait toute la hauteur et toute la largeur du block, pas de
bg en image non plus juste une image gif(voire png24 mais pour des raisons
evidentes il vaut mieux eviter ce format) transparente pour le mot
service. et dans le hover du block tu changes juste la couleur du fond du
<A> sans changer d'image..
J'y avais pensé aussi, mais j'avais peur pour la qualité de la transparance
du gif donc j'avais laissé tomber... Si j'ai du temps je m'y amuserait peut
etre.
pour resoudre le pb sous firefox il faut ajouter : display : block; margin-right: 1px; float: left; dans .roll_services.
Oui effectivement, ca a resolu mon souci. Merci beaucoup pour ca car ca fesais au moins 1h30 que je tournais en rond.
voici comment je ferais moi (et ça evite les pb d'impression de bg):
pas d'image qui fait toute la hauteur et toute la largeur du block, pas de bg en image non plus juste une image gif(voire png24 mais pour des raisons evidentes il vaut mieux eviter ce format) transparente pour le mot service. et dans le hover du block tu changes juste la couleur du fond du <A> sans changer d'image..
J'y avais pensé aussi, mais j'avais peur pour la qualité de la transparance du gif donc j'avais laissé tomber... Si j'ai du temps je m'y amuserait peut etre.
merci pour tout
Christophe
Christophe - Elite grafx SARL
Solution simple : mettre un javascript betement pour remplacer l'image par une autre (attention à précharger l'image).
Oui, excellente solution egalement, je l'ai essayé ca marche tres bien.
Sinon j'ai une petite remarque : le alt des images devrait correpondre au texte contenu dans ces images rien de plus, rien de moins.
Oui, dans un sens tu as raison, mais je me suis dis (par pure hypothese de ma part) que ca pourrait avoir une influence sur le référencement dans les moteurs de recherche du fait que ca sera un site Portfolio avec 90% de contenu en images et tres peu de texte.
Christophe
Solution simple : mettre un javascript betement pour remplacer l'image par
une autre (attention à précharger l'image).
Oui, excellente solution egalement, je l'ai essayé ca marche tres bien.
Sinon j'ai une petite remarque : le alt des images devrait correpondre au
texte contenu dans ces images rien de plus, rien de moins.
Oui, dans un sens tu as raison, mais je me suis dis (par pure hypothese de
ma part) que ca pourrait avoir une influence sur le référencement dans les
moteurs de recherche du fait que ca sera un site Portfolio avec 90% de
contenu en images et tres peu de texte.
Oui, excellente solution egalement, je l'ai essayé ca marche tres bien.
Sinon j'ai une petite remarque : le alt des images devrait correpondre au texte contenu dans ces images rien de plus, rien de moins.
Oui, dans un sens tu as raison, mais je me suis dis (par pure hypothese de ma part) que ca pourrait avoir une influence sur le référencement dans les moteurs de recherche du fait que ca sera un site Portfolio avec 90% de contenu en images et tres peu de texte.
Christophe
Christophe - Elite grafx SARL
Faux, l'image de fond n'est pas le lien: pour l'accessibilité il te faut simplement mettre un texte avec un display:none, il sera visible avec un navigateur textuel comme Lynx. Pour l'impression tu n'as qu'à définir une feuille de style spécifique.
Ok, cette solution me conviens. Je ferai cela
Merci
Christophe
Faux, l'image de fond n'est pas le lien: pour l'accessibilité il te faut
simplement mettre un texte avec un display:none, il sera visible avec un
navigateur textuel comme Lynx. Pour l'impression tu n'as qu'à définir
une feuille de style spécifique.
Faux, l'image de fond n'est pas le lien: pour l'accessibilité il te faut simplement mettre un texte avec un display:none, il sera visible avec un navigateur textuel comme Lynx. Pour l'impression tu n'as qu'à définir une feuille de style spécifique.
Ok, cette solution me conviens. Je ferai cela
Merci
Christophe
Thibaut Allender
On 18/02/2005 15:09, Christophe - Elite grafx SARL wrote :
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
euh... pour l'impression on utilise une css print et on remet en display normal les span contenus dans les a où l'on applique le background
Donc désolé, ta solution n'est pas la bonne
pourtant, c'est comme ca qu'on fait d'habitude et personnellement, t'en connais beaucoup des gens qui désactivent les backgrounds ?
On 18/02/2005 15:09, Christophe - Elite grafx SARL wrote :
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a
désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens
qui seront des images background dans ta solution. De plus, si le visiteur
imprime la page et qu'il n'as pas activé l'option pour imprimer les
backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille
imprimé.
euh... pour l'impression on utilise une css print et on remet en display
normal les span contenus dans les a où l'on applique le background
Donc désolé, ta solution n'est pas la bonne
pourtant, c'est comme ca qu'on fait d'habitude
et personnellement, t'en connais beaucoup des gens qui désactivent les
backgrounds ?
On 18/02/2005 15:09, Christophe - Elite grafx SARL wrote :
Je ne suis pas d'accord pour des raisons d'accessibilité : Si le visiteur a désactivé l'affichage des Backgrounds pour surfer, il ne verra pas les liens qui seront des images background dans ta solution. De plus, si le visiteur imprime la page et qu'il n'as pas activé l'option pour imprimer les backgrounds, le cas est le meme, les liens n'apparaitrons pas sur la feuille imprimé.
euh... pour l'impression on utilise une css print et on remet en display normal les span contenus dans les a où l'on applique le background
Donc désolé, ta solution n'est pas la bonne
pourtant, c'est comme ca qu'on fait d'habitude et personnellement, t'en connais beaucoup des gens qui désactivent les backgrounds ?
