faire un menu avec une image en CSS

[kooby008]

Bonjour,

Je suis en train de créer un nouveau site, et je voudrais réaliser un menu qui fasse que quand on passe son curseur de souris sur un de ses items, une image apparraisse à côté.

Pour le moment je suis arrivé à un résultat pas très probant que vous pouvez voir ici : http://www.gitesdethouy.com/futur/accueil.html.

Chaque item de mon menu est défini par :

Code : Tout sélectionner

#menu a {text-decoration:none; color:#069; background:#fff; margin:2px 2px; width:300px; height:20px; display:block; text-align:left; border:1px solid gray; padding: 0px 10px;}

Je me suis dit qu'en jouant sur la propriété a:hover je pouvais intégrer mon image ainsi :

Code : Tout sélectionner

#menu a:hover {text-decoration:none; color:#069; border: 1px solid gray; font-weight:bold; background:url(../images/venir.jpg) no-repeat bottom right; width:98%; height:192px;}

Mais comme vous pouvez le lire, j'ai spécifié la taille de la balise à celle de l'image ce qui a pour conséquence le décalage des autres items.

Ais-je été assez claire ? Quelqu'un peut-il m'aider svp ...

[calimo]

Eh oui, en agrandissant le bloc du lien, forcément ça décale tout. Il faut donc que ton image de fond soit appliquée à quelque chose d'autre que le lien.

Une solution serait d'ajouter un <span> vide dans le lien. Avouons que ce n'est pas très "clean"
Une autre solution est d'utiliser la pseudo-classe :after

Code : Tout sélectionner

#menu a:hover:after { taille, image, (display:block)…}

Le problème est que ce :after est toujours dans le li, qui s'agrandira donc en conséquence

Solution : "sortir du flux" le bloc :after, en le positionnant en position:absolute, ou alors en float (mais ça risque de moins bien aller).

En tous les cas, il est bien évident que tout ceci ne fonctionnera pas avec IE

[kooby008]

Euh, disons que ce que tu as écris ne m'a pas beaucoup réconforté. A quoi bon faire quelque chose s'il n'est pas compatible avec IE (vu que la plupart des personnes l'utilise).

Je me suis toujours vers du javascript, et j'ai réussi à obtenir ce que je voulais. Merci de l'aide

[calimo]

Euh, disons que ce que tu as écris ne m'a pas beaucoup réconforté. A quoi bon faire quelque chose s'il n'est pas compatible avec IE (vu que la plupart des personnes l'utilise).

À leur faire comprendre qu'IE c'est de la m**** ?

Bon, tu demandais en CSS, donc je donne la technique

Juste une remarque concernant le javascript : si possible, génère le dl id="photo" également en javascript

PS : n'oublie pas de valider réguliprement

[kooby008]

Tout à fait d'accord avec toi pour IE. Depuis que j'ai découvert Firefox j'en suis super content . Personalisable à souhait, très simple, performant, rapide 8) .

Disons que son défaut et qu'il intègre tellement bien les standards du web que ça en devient un peu chiant, quand on fait un site il n'apparait pas toujours pareil sous IE et FF .

M'enfin, la question n'était pas là. Oui je demandais en CSS, mais quand j'ai vu ta réponse je me suis découragé . Je suis allé faire un tour sur les forums traitant du Javascript et j'ai suis adapté le code à mon cas. C'est pourquoi par rapport à ta remarque, je suis imcapable de générer le

Code : Tout sélectionner

id="photo

automatiquement en javascript. Je pense qu'il faut l'encapsuler dans une boucle for ou while, mais je ne connais pas bien ce langage

Enfin concernant la validation, j'ai corrigé quelques bugs que je connaissais, (surtout l'intégration du flash) et là c'est bon je suis certifié W3C : CSS
http://jigsaw.w3.org/css-validator/vali ... cueil.html

Par contre, j'ai des avertissements, je ne comprend pas à quoi ils servent surtout si, ils disent plus haut que c'est OK.

[calimo]

Pour les avertissements sur les couleurs, il faut toujours définir en même temps la couleur et l'arrière-plan. N'en définir qu'un pourrait poser des problèmes, selon les préférences de l'utilisateur, qui ferait ignorer certaines déclarations, faisant disparaître le texte. Donc toujours color et background ensemble.

Pour les polices, tu as des sans serif. Une police avec espace doit être entre guillemets : "sans serif".
En l'occurence ce n'est pas sans serif mais sans-serif avec un trait d'union, tu l'as fait juste à certains endroits

Finalement pour générer proprement un élément il faut utiliser le DOM, document.createElement et cie. CF par exemple http://gilles.chagnon.free.fr/cours/dhtml/index.html

Finalement, n'oublie pas de définir l'encodage de ta page, c'est ultra-important, sinon le navigateur risque de l'interpréter n'importe comment. En plus ça t'empêche de passer la validation HTML

[kooby008]

J'ai enfin trouvé mon menu, et adieu les images ...
http://www.gitesdethouy.com/futur/accueil.php

Tu me dis qu'il faut définir une couleur de fond et une couleur de texte, c'est ce que j'ai commencé à faire, et je vois que ça pose problème... Comprend rien
http://jigsaw.w3.org/css-validator/vali ... ccueil.php

Le menu a changé, et maintenant c'est la cerise sur le gateau. Quand je visionne la page sous IE parfait, mais sous FF, je n'ai plus que le header et le footer, mais plus de contenu :

Mais j'avoue que je ne suis pas un expert dans tous ça, mais je ne pensais pas que ça serait tant prise de tête que ça. Je n'ai pas encore jetté un oeil sur ton lien vers les DOM et je ne comprend pas ce que tu sous-entends par :

Finalement, n'oublie pas de définir l'encodage de ta page, c'est ultra-important, sinon le navigateur risque de l'interpréter n'importe comment. En plus ça t'empêche de passer la validation HTML Confus

Merci de ton coup de pouce