Menu en html, css et javascript, nombreux problèmes

Menu en html, css et javascript, nombreux problèmes - HTML/CSS - Programmation

Marsh Posté le 05-06-2007 à 17:23:30    

Salut tout le monde,
après de maintes questions qui m'en ont apportées encore plus, je me décide à ouvrir un topic, je pense que se sera le mieux, surtout que là ça commence un peu à trainer :/
 
Donc j'explique le truc, et ensuite mes problèmes.
 
Je dois réaliser un menu en html/css/javascript avec une image de fond qui change au passage de la souris sur un des liens du menu.
Lorsque l'image change, cela doit se réaliser avec une sorte de transition.
Lorsque l'on passe le curseur sur un des titres du menu, en plus du changement d'image il faut aussi qu'un sous menu apparaisse.
J'ai pour l'instant "fait" du full js pour cette partie.
 
L'autre partie est le positionnement de mon menu par dessus l'image principale, menu qui doit avoir une transparence de 50% dirons nous.
 
Initialement, ma structure html était la suivante :
 

Code :
  1. <div id="main">
  2. <dl id="menu">
  3. ...
  4. </dl>
  5. </div>


 
Mais du fait que ça ne fonctionnait pas du tout à cause du js car je devais d'abord cacher tout le bloc "main" pour ensuite réliaser le "fade" sur l'image, j'ai opté pour la structure suivante :
 

Code :
  1. <dl id="menu">
  2. ...
  3. </dl>
  4. <div id="main">
  5. &nbsp;
  6. </div>


 
Bon, maintenant que tout est expliqué, les problèmes.
 

  • Premier problème et des plus embetants, lorsque les sous menus apparaissent, ils ne s'affichent pas sous IE.

Il est en effet apparut que cela provient de cette ligne dans la css :
 

Code :
  1. filter:alpha(opacity=60);


 

  • Autre problème, lorsque j'ai du modifié la structure du fichier html (cf. plus haut), j'ai ajouté la propriété "float: left" à mon bloc menu pour que celui-ci se superpose.

Ca a fonctionné du premier coup sous IE, mais sous FF ça s'affiche assez mal. Donc en fait je pense que IE interprete mal le code, comme d'habitude, et que le comportement normal de mon bloc apparait sous FF. Dans ce cas, va falloir m'aider à bien le positionner [:matleflou].
 

  • Si l'on supprime la ligne de transparence pour IE dans la CSS, il apparait un nouveau problème : les sous menu sont bien plus bas par rapport au titre leurs correspondant


  • On se rend compte que sous IE, lorsque l'on survole un titre, la page "wizz", entendait par là que l'animation bouge très rapidement puis se repositionne à son emplacement d'origine.


  • Si on charge la page avec IE, celui-ci nous indique la présence d'un ActiveX dangereux et nous demande si on veut l'activer ou pas. Si on choisit de ne pas l'activer, le menu reste déroulé.


Voilà, je crois que pour l'instant, on a fait le tour des problèmes, et ça fait déjà pas mal...
 
Vous pouvez trouver l'exemple en ligne par ici et la css par là.
 
Merci d'avance :jap:


---------------
Twitter
Reply

Marsh Posté le 05-06-2007 à 17:23:30   

Reply

Marsh Posté le 06-06-2007 à 12:56:09    

Personne ?


---------------
Twitter
Reply

Marsh Posté le 06-06-2007 à 15:33:42    

Ah la la, quelle souffrance que ces p***** d'explorateurs hein.  
 
Pour commencer, je te recommande de différencier tes feuilles de style IE et firefox avec du commentaire conditionnel dans le head de tes feuilles HTML, genre:  
 
<link href="tafeuilleFirefoxetAutres.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 6]>
   <link href="tafeuilleIE.css" rel="stylesheet" type="text/css" />
<![endif]-->
 
Comme ça, toute modif qui marche pour l'un mais pas pour l'autre sera prise en compte par le browser correspondant. Comme ça tu pourras mettre uniquement le filtre d'opacité dans ta feuille pour IE (le filter:alpha(opacity=60);) et virer le reste concernant l'opacité (en le mettant dans la feuille pour FF et autres).  Pour le reste heuuuuu faut voir :D.
 

Reply

Marsh Posté le 06-06-2007 à 15:44:52    

Euh oui, mais pour l'instant je n'ai rien de spécial ni pour IE ni pour FF.
 
Et c'est justement ce filtre qui merde sous IE, mais c'est le seul qui fonctionne à ma connaissance, donc ça ne sert un peu à rien là :/


---------------
Twitter
Reply

Marsh Posté le 06-06-2007 à 16:12:37    

Question bête :p : on parle bien d'IE6 la ?
 
Et oui je sais que tu n'as qu'une feuille de style, je te recommande justement d'en faire deux ;p.


Message édité par D3bug le 06-06-2007 à 16:13:08
Reply

Marsh Posté le 06-06-2007 à 16:40:49    

Mais je ne vois pas l'interêt de faire deux feuilles de style alors que je n'ai même pas de hack dans ma CSS principale :heink:  
 
Et on parle d'IE7...


---------------
Twitter
Reply

Marsh Posté le 06-06-2007 à 19:19:17    

Bon, quelques problèmes de réglés grâce à une précieuse aide sur un autre forum.
 
Il reste ces points :
 

  • Premier problème et des plus embetants, lorsque les sous menus apparaissent, ils ne s'affichent pas sous IE.

Il est en effet apparut que cela provient de cette ligne dans la css :
 

Code :
  1. filter:alpha(opacity=60);


 
 

  • Si l'on supprime la ligne de transparence pour IE dans la CSS, il apparait un nouveau problème : les sous menu sont bien plus bas par rapport au titre leurs correspondant


 

  • Si on charge la page avec IE, celui-ci nous indique la présence d'un ActiveX dangereux et nous demande si on veut l'activer ou pas. Si on choisit de ne pas l'activer, le menu reste déroulé.


---------------
Twitter
Reply

Marsh Posté le 07-06-2007 à 23:02:14    

Ok, IE7 ne gère pas les styles de la même manière qu'IE6 (ah ça t'avance bien ça hein ?).
L'intérêt des deux feuilles de style:  
- Indépendance des modifs pour l'un ou l'autre navigateur. Il se peut qu'une modif affecte en bien un explorateur, et l'autre en mal, sans parler des conflits. Te suffit de copier/coller le contenu d'une feuille dans une autre et d'ajouter le commentaire conditionnel indiqué plus haut, ensuite tu vires le code redondant (comme les opacités répétées en 4000 exemplaires dans ton css) dans une feuille et tu le colles dans l'autre.  
 
Exemple, pour ton probleme "Si l'on supprime la ligne de transparence pour IE dans la CSS, il apparait un nouveau problème : les sous menu sont bien plus bas par rapport au titre leurs correspondant" , tu pourrais ajouter une belle grosse marge dans ta feuille IE, sans que ça affecte l'aspect sur FF.  
 

Reply

Marsh Posté le 07-06-2007 à 23:11:05    

Oui mais non, ne t'inquiète pas je connais les commentaires conditionnels, et si le besoin s'en fait sentir, je les utiliserai, chose que j'ai déjà faite sur d'autres projets.
 
Pour l'instant le besoin ne s'en fait pas du tout sentir, et si je peux rester avec une seule feuille, je le ferai.


---------------
Twitter
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed