Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3023 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1570480
koskoz
They see me trollin they hatin
Posté le 05-06-2007 à 17:23:30  profilanswer
 

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
mood
Publicité
Posté le 05-06-2007 à 17:23:30  profilanswer
 

n°1570871
koskoz
They see me trollin they hatin
Posté le 06-06-2007 à 12:56:09  profilanswer
 

Personne ?


---------------
Twitter
n°1571043
D3bug
Geeky Dad
Posté le 06-06-2007 à 15:33:42  profilanswer
 

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.
 

n°1571052
koskoz
They see me trollin they hatin
Posté le 06-06-2007 à 15:44:52  profilanswer
 

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
n°1571085
D3bug
Geeky Dad
Posté le 06-06-2007 à 16:12:37  profilanswer
 

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
n°1571118
koskoz
They see me trollin they hatin
Posté le 06-06-2007 à 16:40:49  profilanswer
 

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
n°1571214
koskoz
They see me trollin they hatin
Posté le 06-06-2007 à 19:19:17  profilanswer
 

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
n°1571915
D3bug
Geeky Dad
Posté le 07-06-2007 à 23:02:14  profilanswer
 

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.  
 

n°1571916
koskoz
They see me trollin they hatin
Posté le 07-06-2007 à 23:11:05  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Des variables variables en javascript ?Possible ? Stocker dans une variable de l'HTML généré par une page PHP
Problème avec un menu css sous IE7Menu dynamique qui ne s'affiche pas sous Firefox
site php.net mais pour du javascript?Probleme avec la bibliothèque/toolbox Dojo (Javascript)
charger un fichier xml avec javascripttrouver un control ASP en javascript
[JAVASCRIPT] chargement fichier lors de lappel d'une fonction 
Plus de sujets relatifs à : Menu en html, css et javascript, nombreux problèmes


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR