[résolu] Rollover et Ctrl + Molette

Salut à tous et félicitations pour cet excellent site !

Alors voilà ma question : je me suis basé sur le tuto des rollovers css et ça fonctionne impec...
Au moment de tester j'ai voulu voir ce qui s'affichait dans le cas d'un Ctrl + Molette (augmentation de la taille du texte) et Ô surprise mon image "double" apparaît au fur et à mesure
"Ah oui !" me dis-je "c'est parce qu'il faut protéger la taille des caractères dans l'id du menu avec !important"...

Mais malheureusement cela ne fonctionne pas !

Est-ce qu'une âme charitable pourrait me donner une astuce ?

Merci !
Modifié par Heyoan (22 Sep 2006 - 01:22)

Bonsoir,

Ce que j'en comprends, c'est que tu souhaiterai empécher l'agrandissement de la taille de caractère, alors qu'en réalité il est nécessaire que l'utilisateur puisse à loisir choisir la taille du texte, en fonction de son navigateur, son écran, sa vue, etc... Aller dans le sens contraire irait à l'encontre des principes de l'accessibilité.
Mais je pense que tu ne souhaite pas cela, je pense avoir mal compris ; aussi, aurais tu un exemple en ligne pour qu'il soit possible de mieux comprendre ton problème ?
Modifié par Mikachu (21 Sep 2006 - 21:14)

Hello Mikachu !

Effectivement loin de moi l'idée de bloquer l'agrandissement !
Ma question ne concernait que les boutons du menu en rollover pour ne pas avoir cela avec le Ctrl + Molette :



Pour le voir en ligne, c'est ici

Donc l'idéal aurait été de pouvoir bloquer l'agrandissement uniquement du menu, comme s'il s'agissait d'une image classique avec gestion du onmouseover...

Bon c'est vrai que ce n'est pas dramatique mais bon...

En tous cas merci de me prêter attention

Hello Heyoan,

Pourquoi ne pas, tout simplement, prévoir de la marge sur tes images de rollover ? Avec des images simples comme celle-ci, tu peux facilement monter jusqu'à 100-200px de continuation du motif ou de couleur unie. Pour un motif de 100px de haut, ça te fera donc une image de 200px de haut. En fignolant le positionnement de l'image de fond, ça devrait passer sans problème.

Heyoan a écrit :
Donc l'idéal aurait été de pouvoir bloquer l'agrandissement uniquement du menu, comme s'il s'agissait d'une image classique avec gestion du onmouseover...

Ça serait loin d'être idéal, à vrai dire. Ton menu à des intitulés courts (un seul mot), et le texte ne souffre pas d'agrandissements assez forts : le texte lui-même reste très lisible, seules les images de fond laissent à désirer.

Tu es dans une situation (avec ce menu) où tu as un avantage pour l'accessibilité aux malvoyants. Pourquoi perdre cet avantage pour une bête question d'image de fond ? On corrige l'image, et on n'en parle plus.

Au pire tu prévois une image plus haute, de manière à avoir de la marge pour ton fond pour 2-3 agrandissements.
Si tes lignes de menus font 20px de haut par exemple, prévois une image de 100px de haut, divisée en deux, les 50 premiers pixels sont à la position :link, et les 50 derniers à la position :hover
Dans ta CSS, tu spécifie ton déplacement de -50px au lieu de -20px, et dans le cas ou tu agrandis la typo, tu as de la marge dans chaque fond.

Une chose pour gagner en tranquillité dans un menu à l'agrandissement, c'est de le centrer. Ainsi tu utilise l'espace des deux cotés de ton lien au lieu d'un seul comme dans ton menu actuel (en raison de ta marge déja définie et ta justification gauche).

OK les amis ! J'ai tout compris !

Merci pour vos réponses