[Résolu] Questions Menu déroulant /opacité/IE7

Questions Menu déroulant /opacité/IE7 [Résolu] - HTML/CSS - Programmation

Marsh Posté le 28-04-2010 à 12:14:43    

... Et mes questions menu, les voici :
 
 
Je suis en train de créer un menu latéral, qui va se développer sur 3 niveaux (rubriques 1 à 5, sous-rubriques, et sous-sous rubriques), donc un étalement latéral assez important...
 
Avant ce menu, j'ai créé un bloc, avec des propriétés de transparence (bloc destiné à intégrer plus esthétiquement le menu dans le fond-image de la page). On va appeler ce bloc le bloc "contenant_menu"  
 
Ce bloc "contenant_menu" ayant des propriétés de transparence (opacité = 40% par ex..), ces propriétés se transmettent aux éléments enfants, donc au menu. Très bien, ça m'arrange... :o  
 
 
Par contre je souhaiterais que les noms des rubriques n'aient plus cette propriété de transparence, pour une meilleure lisibilité.  
Comment faire ? (Je crois me souvenir que c'est un truc tout bête qui permet de désolidariser de l'élément-père - ou bien de faire perdre le caractère "bloc" -> le "display" peut-être... ?). Bref j'ai un trou de mémoire...  [:panzani gino]  
 
 
 
Mon autre question :
 
Comme je le disais, mon menu "s'étale" sur le côté (droit).
 
Pas de soucis, si ce n'est que, sous Internet Explorer, tout ce qui "sort" de mon bloc "contenant_menu" n'apparaît pas ! Donc le menu ne s'étale pas comme prévu, il reste limité par le bloc parent "contenant_menu".
 
Comment régler ça ? (sous Firefox aucu problème...)

Message cité 2 fois
Message édité par toum_toum le 05-05-2010 à 14:13:35

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 28-04-2010 à 12:14:43   

Reply

Marsh Posté le 28-04-2010 à 13:21:07    

toum_toum a écrit :


Par contre je souhaiterais que les noms des rubriques n'aient plus cette propriété de transparence, pour une meilleure lisibilité.
Comment faire ? ([b]Je crois me souvenir que c'est un truc tout bête qui permet de désolidariser de l'élément-père[/b] - ou bien de faire perdre le caractère "bloc" -> le "display" peut-être... ?). Bref j'ai un trou de mémoire...  [:panzani gino]


Essaye la déclaration !important en fin de règle.

 
toum_toum a écrit :


Mon autre question :

 

Comme je le disais, mon menu "s'étale" sur le côté (droit).

 

Pas de soucis, si ce n'est que, sous Internet Explorer, tout ce qui "sort" de mon bloc "contenant_menu" n'apparaît pas ! Donc le menu ne s'étale pas comme prévu, il reste limité par le bloc parent "contenant_menu".

 

Comment régler ça ? (sous Firefox aucu problème...)


Une page test à donner ?

Message cité 1 fois
Message édité par Skopos le 28-04-2010 à 13:21:21
Reply

Marsh Posté le 28-04-2010 à 14:09:03    

Skopos a écrit :


Essaye la déclaration !important en fin de règle.


Pas bête, mais je me dis que est-ce qu'au final j'ai besoin de l'utiliser ?
 
Si je définis une opacité de 100% juste sur mes éléments textes, ca devrait suffire en fait [:klemton] , non ?
 
 

Skopos a écrit :


Une page test à donner ?  


Hélas je suis en local.
 
Bon vais voir pour mettre ça en ligne... :o
 
Edit :
Voilà : http://tiny.cc/nd6fl


Message édité par toum_toum le 29-04-2010 à 11:43:23

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 28-04-2010 à 17:49:37    

toum_toum a écrit :

(...)
 
Par contre je souhaiterais que les noms des rubriques n'aient plus cette propriété de transparence, pour une meilleure lisibilité.  
Comment faire ? (Je crois me souvenir que c'est un truc tout bête qui permet de désolidariser de l'élément-père - ou bien de faire perdre le caractère "bloc" -> le "display" peut-être... ?). Bref j'ai un trou de mémoire...  [:panzani gino]  

Question 1 réglée   :)  
 

toum_toum a écrit :

Mon autre question :
 
Comme je le disais, mon menu "s'étale" sur le côté (droit).
 
Pas de soucis, si ce n'est que, sous Internet Explorer, tout ce qui "sort" de mon bloc "contenant_menu" n'apparaît pas ! Donc le menu ne s'étale pas comme prévu, il reste limité par le bloc parent "contenant_menu".
 
Comment régler ça ? (sous Firefox aucu problème...)


Me reste ce pb par contre... :o


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 29-04-2010 à 11:45:52    

Up!
 
La technologie utilisée pour le développement du menu est Spry (un truc Adobe, très voisin de scriptaculous), mais je pense que ça reste un simple probleme de bloc CSS... (entre le "bloc de fond" - celui en transparence - et les blocs-menus).


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 29-04-2010 à 12:54:59    

Si le JS et désactivé ils font comment les gens ?

Reply

Marsh Posté le 29-04-2010 à 13:25:07    


Ben que ce soir Spry, scriptaculous, MooTools et consorts, je suis bien obligé de passer par l'un d'eux... donc...
 

Message cité 1 fois

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 29-04-2010 à 13:37:33    

ton menu, faut pas avoir des pbs de vue, dit donc! C'est pas très lisible, mais bon, c'est peut-être pas terminé...
 
Pour les pbs entre Firefox (ou bon navigateur et IE), y'a le coup des filtres passe-haut, passe-bas, passe-bande, des hacks css en fait : http://centricle.com/ref/css/filters/  ;)

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 29-04-2010 à 14:04:31    

toum_toum a écrit :


Ben que ce soir Spry, scriptaculous, MooTools et consorts, je suis bien obligé de passer par l'un d'eux... donc...
 


Le JS il doit venir le cas échéant en complément, pour apporter une amélioration ergonomique ou visuelle. Par exemple ici pour mettre un fondu d'animation ou aller chercher un aperçu du contenu ciblé.
Si sa désactivation empêche un truc aussi primordial que la navigation il faut revoir sa copie.
 
Au final c'est une sorte de menu déroulant horizontal que tu veux faire, pas besoin de JS dans l'absolu.

Reply

Marsh Posté le 29-04-2010 à 14:26:14    

rufo a écrit :

ton menu, faut pas avoir des pbs de vue, dit donc! C'est pas très lisible, mais bon, c'est peut-être pas terminé...
C'est juste un squelette, le "remplissage" ne sera qu'en fin de travail, c'est donc moche :o
 
Pour les pbs entre Firefox (ou bon navigateur et IE), y'a le coup des filtres passe-haut, passe-bas, passe-bande, des hacks css en fait : http://centricle.com/ref/css/filters/  ;)
Dans les "No" pour IE6 et IE7, je ne vois rien en rapport avec mes scripts...  
 
Je vais poursuivre mes inquisitions :o



---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 29-04-2010 à 14:26:14   

Reply

Marsh Posté le 30-04-2010 à 12:04:21    

Ca y est j'ai trouvé la cause du blocage  [:icon3] (sans toutefois saisir pourquoi, et comment le résoudre).
 
En fait c'est mon bloc "contenant_menu", et très précisément ce qui est lié à ça :

Citation :

Ce bloc "contenant_menu" ayant des propriétés de transparence (opacité = 40% par ex..), ces propriétés se transmettent aux éléments enfants, donc au menu. Très bien, ça m'arrange... :o  


En fait, si j'enlève ce que j'avais écrit pour avoir ma transparence, mon problème disparaît.
 
Le code incriminé est celui-ci :
 
#contenant_menu {
     (...)
   filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}
 
 
Ce sont ces 4 lignes qui font obstacle, sous IE, au développement de mon menu. Si j'enlève ces ligne, mon menu devient Ok !
 :??:


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 30-04-2010 à 12:17:20    

hmm... problème à la con -> problème de hasLayout peut-être ?
 
Ajoute zoom: 1; après les 4 lignes pour voir.

Reply

Marsh Posté le 30-04-2010 à 12:45:15    


Non, pas de changement. :o  
 
 
Une observation : si je remets mon script précédent dont je parlais plus haut (effet "Spry" de fade/opacité),
ca repart également...
 
 
Le script :
 
Sur l'objet dans l'HTML :

Code :
  1. onmouseover="MM_effectAppearFade('menu1', 1000, 30, 85, true)" onmouseout="MM_effectAppearFade('menu1', 1000, 85, 30, true)"


 
Dans le fichier .js :  

Code :
  1. Spry.Effect.Fade = function (element, options)
  2. {
  3. if (!this.notStaticAnimator)
  4.  return Spry.Effect.Utils.showInitError('Fade');
  6. Spry.Effect.Cluster.call(this, options);
  8. this.name = 'Fade';
  9. var element = Spry.Effect.getElement(element);
  10. this.element = element;
  11. if (!this.element)
  12.  return;
  13. var durationInMilliseconds = 1000;
  14. var fromOpacity = 0.0;
  15. var toOpacity = 100.0;
  16. var doToggle = false;
  17. var transition = Spry.fifthTransition;
  18. var fps = 60;
  19. var originalOpacity = 0;
  20. if(/MSIE/.test(navigator.userAgent))
  21.  originalOpacity = parseInt(Spry.Effect.getStylePropRegardlessOfDisplayState(this.element, 'filter').replace(/alpha\(opacity=([0-9]{1,3})\)/g, '$1'), 10);
  22. else
  23.  originalOpacity = parseInt(Spry.Effect.getStylePropRegardlessOfDisplayState(this.element, 'opacity') * 100, 10);
  25. if (isNaN(originalOpacity))
  26.  originalOpacity = 100;
  28. if (options)
  29. {
  30.  if (options.duration != null) durationInMilliseconds = options.duration;
  31.  if (options.from != null){
  32.   if (Spry.Effect.Utils.isPercentValue(options.from))
  33.    fromOpacity = Spry.Effect.Utils.getPercentValue(options.from) * originalOpacity / 100;
  34.   else
  35.    fromOpacity = options.from;
  36.  }
  37.  if (options.to != null)
  38.  {
  39.   if (Spry.Effect.Utils.isPercentValue(options.to))
  40.    toOpacity = Spry.Effect.Utils.getPercentValue(options.to) * originalOpacity / 100;
  41.   else
  42.    toOpacity = options.to;
  43.  }
  44.  if (options.toggle != null) doToggle = options.toggle;
  45.  if (options.transition != null) transition = options.transition;
  46.  if (options.fps != null) fps = options.fps;
  47.  else this.options.transition = transition;
  48. }
  50. fromOpacity = fromOpacity/ 100.0;
  51. toOpacity = toOpacity / 100.0;
  53. options = {duration: durationInMilliseconds, toggle: doToggle, transition: transition, from: fromOpacity, to: toOpacity, fps: fps};
  54. var fadeEffect = new Spry.Effect.Opacity(element, fromOpacity, toOpacity, options);
  55. this.addNextEffect(fadeEffect);
  56. };
  58. Spry.Effect.Fade.prototype = new Spry.Effect.Cluster();
  59. Spry.Effect.Fade.prototype.constructor = Spry.Effect.Fade;

Message cité 1 fois

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 30-04-2010 à 12:51:01    


C'est l'opacité qui fait péter un plomb à IE. Mais pourquoi ?...
 
(Car si je n'ai pas ce bloc "contenant_menu" en arrière-plan du menu, pas de soucis...)


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 01-05-2010 à 11:17:16    

toum_toum a écrit :


Non, pas de changement. :o  
 
 
Une observation : si je remets mon script précédent dont je parlais plus haut (effet "Spry" de fade/opacité),
ca repart également...
 


Ca repart, c'est-à-dire que c'est bon, que tout marche comme prévu ?
 
Essaye de déclarer zoom:1; sur une ligne à part.

Code :
  1. #contenant_menu {
  3. zoom: 1;
  5. }


 
Je connais le pb mais je maitrise pas vraiment le concept du hasLayout :/
 
Il semble bien y avoir un pb de haslayout avec l'opacité, regarde là-dedans :spamafote:
http://www.google.fr/search?q=hasl [...] =firefox-a

Message cité 1 fois
Reply

Marsh Posté le 01-05-2010 à 11:28:56    

Skopos a écrit :


Ca repart, c'est-à-dire que c'est bon, que tout marche comme prévu ?


 
Non hélas. je parlais du bug qui repart
 

Skopos a écrit :


Essaye de déclarer zoom:1; sur une ligne à part.

Code :
  1. #contenant_menu {
  3. zoom: 1;
  5. }


 
Je connais le pb mais je maitrise pas vraiment le concept du hasLayout :/
 
Il semble bien y avoir un pb de haslayout avec l'opacité, regarde là-dedans :spamafote:
http://www.google.fr/search?q=hasl [...] =firefox-a


Je vais voir, moi aussi ça me dit qq chose ce haslayout je l'ai dejà vu.
Mais es-tu sûr que ca correspond à mon truc ? Moi l'opacité fonctionne. Le fade aussi.
C'est juste l'affichage de mon menu qui reste dans les limites du bloc placé derrière, juste du fait que cette propriété d'opacité existe - et même si à priori on pourrait penser que ça n'a rien à voir :/
 
(PS : merci pour ton aide)
 


Message édité par toum_toum le 01-05-2010 à 13:34:23

---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 01-05-2010 à 11:46:00    

De rien, par contre si tu pouvais quoter correctement ce serait bien parce que là par exemple si je veux quoter ton message c'est très chiant.

Reply

Marsh Posté le 01-05-2010 à 19:12:07    


Re-salut,
 
 
J'ai remis en ligne mon probleme, réduit à sa plus simple expression : 2 malheureux petits blocs
l'un sur l'autre...
 
 
Cas 1 : rien dessus;
Cas 2 : une opacité sur le bloc de fond (le 1)
Cas 2 : plus d'opacité sur le bloc de fond (le 1), mais un comportement de fade in/fade out sur ce même bloc.
 
http://tinyurl.com/2dfv6tw
 
Donc pareil : sous FF, no soucis, sous IE (7), le bug... : le bloc 2 tronqué


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Marsh Posté le 03-05-2010 à 01:08:13    


J'ai réduit mon problème d'opacité sous IE à sa plus simple expression :  
 
A) A gauche 2 blocs "normaux".  
B) A droite les 2 blocs avec, pour le bloc 1, une opacité définie dans le CSS.
(Seule la première ligne est utile pour IE)
 
->  http://nsa14.casimages.com/img/201 [...] 644885.jpg
 
 
Et le résultat : l'opacité fonctionne, mais du coup le bloc 2 est tronqué (limité par les limites du bloc 1)...
 
 
Merci à celui ou celle qui trouverait un début de solution  :o  
 
 


---------------
“Et maintenant, la météo" - Soloviev 2022-2024
Reply

Sujets relatifs:

Leave a Replay

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