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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1988347
toum_toum
Vivons masqués
Posté le 28-04-2010 à 12:14:43  profilanswer
 

... 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
mood
Publicité
Posté le 28-04-2010 à 12:14:43  profilanswer
 

n°1988389
Skopos
Posté le 28-04-2010 à 13:21:07  profilanswer
 

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
n°1988412
toum_toum
Vivons masqués
Posté le 28-04-2010 à 14:09:03  profilanswer
 

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
n°1988496
toum_toum
Vivons masqués
Posté le 28-04-2010 à 17:49:37  profilanswer
 

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
n°1988654
toum_toum
Vivons masqués
Posté le 29-04-2010 à 11:45:52  profilanswer
 

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
n°1988672
Skopos
Posté le 29-04-2010 à 12:54:59  profilanswer
 

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

n°1988680
toum_toum
Vivons masqués
Posté le 29-04-2010 à 13:25:07  profilanswer
 


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
n°1988684
rufo
Pas me confondre avec Lycos!
Posté le 29-04-2010 à 13:37:33  profilanswer
 

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
n°1988707
Skopos
Posté le 29-04-2010 à 14:04:31  profilanswer
 

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.

n°1988727
toum_toum
Vivons masqués
Posté le 29-04-2010 à 14:26:14  profilanswer
 

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
mood
Publicité
Posté le 29-04-2010 à 14:26:14  profilanswer
 

n°1989041
toum_toum
Vivons masqués
Posté le 30-04-2010 à 12:04:21  profilanswer
 

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
n°1989049
Skopos
Posté le 30-04-2010 à 12:17:20  profilanswer
 

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

n°1989060
toum_toum
Vivons masqués
Posté le 30-04-2010 à 12:45:15  profilanswer
 


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
n°1989062
toum_toum
Vivons masqués
Posté le 30-04-2010 à 12:51:01  profilanswer
 


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
n°1989315
Skopos
Posté le 01-05-2010 à 11:17:16  profilanswer
 

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
n°1989318
toum_toum
Vivons masqués
Posté le 01-05-2010 à 11:28:56  profilanswer
 

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
n°1989321
Skopos
Posté le 01-05-2010 à 11:46:00  profilanswer
 

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.

n°1989367
toum_toum
Vivons masqués
Posté le 01-05-2010 à 19:12:07  profilanswer
 


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
n°1989545
toum_toum
Vivons masqués
Posté le 03-05-2010 à 01:08:13  profilanswer
 


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

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

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

 

Sujets relatifs
[Résolu] Lignes de code CSS venues de Saturne ?[Résolu] Pertinence. MATCH/AGAINST
menu déroulant largeurs variables sans JS[RESOLU]Plus de "insérer un commentaire" après la macro
[Résolu][php]récupération de données d'un fichier .txt[Résolu] Bug: le texte est gros aléatoirement...
Menu "Cloud"Macro oublie des cellules [Résolu]
Menu "animé" et très large. Flash ? Pas flash ?... 
Plus de sujets relatifs à : [Résolu] Questions Menu déroulant /opacité/IE7

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.076 secondes

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