Menu en html, css et javascript, nombreux problèmes - HTML/CSS - Programmation
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 .
Marsh Posté le 06-06-2007 à 16:12:37
Question bête : 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.
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 :
Il est en effet apparut que cela provient de cette ligne dans la css :
Code :
|
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.
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.
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 :
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 :
Bon, maintenant que tout est expliqué, les problèmes.
Il est en effet apparut que cela provient de cette ligne dans la css :
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 .
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
---------------
Twitter