28220 sujets

CSS et mise en forme, CSS3

[résolu presque] Menu redoulant css

bonjour

j'essai d'adapter le menu déroulant de raphael pour intégrer une image devant chaque item du menu

mais je coince car visiblement ca ne passe pas sous IE de plus dans le Roll over, le changement de couleur ne passe pas si j'ai un sous menu ……
si vous avez une petite idée ………


visible à
http://www.crealine.com/menu/menuderoulant.html

merci

jacques
Modifié par jacques (25 Apr 2005 - 10:53)
Pour le menu redoulant Smiley cligne cela depend si tu veux différentes images en fonction de chaque onglet ou non !
Si c'est une seule image presente partout tu as plusieurs solutions en applicant une backgroud-image au <dl> soit en disant que cette image est la puce de la liste <li>.
Plus de renseignements sur l'objectif à atteindre serait d'un grand secours.

Dans le cas d'image différentes mettre dans les <dl> les images en float: left sans padding ni margin. Dites ce que vous essayez de faire precisement.

Au plaisir.

NOTA: Bienvenue
je cherche effectivement pour chaque item du menu a avoir des images différentes et je voulais que le roll over fonctionne au passage de la souris pour avoir un changement de couleur sur le menu survolé
Bien compris êtes vous arrivé a quelque chose ?
En ce qui concerne le rollover il suffit de remplacer les lignes de la façon suivante :
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
par
<dt onmouseover="javascript:montre('smenu1');"><a href="(EmptyReference!)">Menu 1</a></dt>


en effet le emptyreference fait en fait le rollover.

Pour les images comme je vous le disais il faut les placer dans le dl en float left. Pas la peine de spécifier à chaque fois leur taille puisqu'elles auront toutes la mêmes. On le met en float: left. Y'a une petite bidouille sur la couleur de background pour corriger la différence d'interprétation entre FF et IE (probleme du 1px).
Cela donne ceci : je ne mets que ce qui a été modifié. Est ce que cela convient et surtout avez vous compris ce que j''ai essayé de faire ?

Partie modifié :
#menu dl     { width: 12em; float: left; border: solid 1px gray; background: #e8eeb7}
#menu dl img  {float: left; width:38px; height: 38px;margin-top: 2px;margin-left:2px; border: 0px;}
#menu dt   { font-weight: bold; background: #e8eeb7; text-align: center; cursor: pointer; margin: 1px; padding: 0; height: 40px;}
#menu dt span  { color: #17aadd; margin-top: 0 }
#menu dd  { display: none; border: 0px;}
#menu li  { text-align: left; padding-left: 5px; border:0px;}

Modifié par gilles6975 (22 Apr 2005 - 09:56)
merci gilles je crois en effet que j'ai a peu près tout intégré mais il reste un problème, l'image que l'on place en float dans la balise dl, ne s'affiche pas sous IE, en effet elle apparait "sous" la balise dt j'ai donc supprimé la couleur de fond pour la balise dt et ca marche ……… les css sont à la fois passionnante ... et ... comment dirais je .. très ... casse pied …………… merci de votre réactivité
Le lien de Shimoon est tres interressant aussi. Se passer de Javascript c'est parfois pas mal surtout si vous avez d'autres script a mettre en route sur la page.

Si votre problème est résolu vous pouvez editer votre premier post en rajoutant [résolu] dans le sujet.

Bonne journée et bon développement
le problème est a peine résolu,
en effet pour que les images soient visibles j'ai du mettre aucun fond de couleur à la balise dt, le problème se pose alors lors du roll over, la couleur attribué masque les images (visiblement le probléme existe uniquement sur IE)

voila ou j'en suis

http://www.crealine.com/menu/menuphase1.html

jacques
Chez moi sous ie je n'ai pas de probleme les images sont là rollover ou pas !
J'utilise ie6. Peut être un probleme spécifique chez vous !
Sujet clos
Aller à