[Résolu] Opacité et affichage limité par bloc parent, sous IE7 !

Bonjour à tous.


Je viens poser une question au sujet de l'opacité/transparence, (sous IE7...), car je suis confronté depuis 6 jour à un probleme lié lui à cette fameuse opacité avec IE(7).

Le plus simple : voici ce problème en image :
http://nsa14.casimages.com/img/2010/05/03/100503124216644885.jpg

-> L’opacité créée sur le bloc 1 me limite l’affichage de mon bloc 2 aux dimensions du bloc 1 !

Je ne comprends pas pourquoi ni comment y remédier… (J’ai volontairement simplifié à des blocs, mais il s’agit en fait pour le bloc 2 d’un menu déroulant latéral, qui ne peut, du coup, s’afficher ! Fâcheux !!!)


Merci à celui ou celle qui trouverait un début de solution !
Modifié par stephan53 (05 May 2010 - 14:13)

Bonjour,

Si ton menu doit être situé sur le coté de ton conteneur, pourquoi le placer dedans ? Tu pourrais mettre l'un a coté de l'autre, ce qui te permettrais de zaper ton problème.
Modifié par mal (03 May 2010 - 12:22)

Petite précision par rapport à ton code CSS : il n'est pas utile d'ajouter le préfixe -moz- ou -khtml- devant la propriété opacity.

phpdoesnotcare a écrit :
Petite précision par rapport à ton code CSS : il n'est pas utile d'ajouter le préfixe -moz- ou -khtml- devant la propriété opacity.

Bonjour,

Oui en effet. Mais ceci dit seule la première ligne "concerne" mon probleme avec IE - l filter:opacity (j'ai mis les 4 parce que sinon qq'un m'aurait dit que mon script était incomplet !)


PS : j'ai aussi developpé une solution avec un script (java + Spry) : l'effet sous IE est pareil : mon bloc 2 est tronqué.
A cause toujours de l' "opacity"...

mal a écrit :
Bonjour,

Si ton menu doit être situé sur le coté de ton conteneur, pourquoi le placer dedans ? Tu pourrais mettre l'un a coté de l'autre, ce qui te permettrais de zaper ton problème.

Bonjour,

Non pas du tout le menu (bloc2) est bien dans le conteneur (bloc1). Je le fais déborder car c'est un menu à 3 niveaux (donc il s'étale très largement sur la droite) ! Donc au repos, on le voit dans le bloc 1, au survol, il dépasse largement à droite.

Je place ma propriété d'opacité sur le bloc 1 car en fond derrière tout ça, il y a une photo.
Modifié par stephan53 (03 May 2010 - 12:57)

Est-ce que je ne peux pas m'en sortir en jouant sur les positions (relative/absolute) de mes 2 blocs ?...

stephan53 a écrit :
Est-ce que je ne peux pas m'en sortir en jouant sur les positions (relative/absolute) de mes 2 blocs ?...

Sûrement, mais il faudrait pour cela que tu postes le code HTML et CSS correspondant à l'exemple que tu décris, pour que l'on puisse t'indiquer tes erreurs.

Si le bloc2 est enfant du le bloc1, il est normal que les deux éléments soient opaque puisque le bloc parent est indiqué comme opaque. C'est le principe de l'héritage.
Modifié par octopus984 (03 May 2010 - 14:21)

Bonsoir.


Le code je l'ai fait à la va-vite, pour montrer avec des blocs basiques mon probleme... Le voici :


CSS :

#bloc1A {
width: 70px;
height: 120px;
position:absolute;
top: 40px;
left: 120px;
margin:0px;
padding:0px;
background-color: #AAA;
}

#bloc2A {
width: 100px;
height: 70px;
position:absolute;
top: 20px;
left: 20px;
margin:0px;
padding:0px;
background-color: #DDD;
}

#bloc1B {
width: 70px;
height: 120px;
position:absolute;
top: 40px;
left: 320px;
margin:0px;
padding:0px;
background-color: #AAA;
filter:alpha(opacity=40);
-moz-opacity:0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}

#bloc2B {
width: 100px;
height: 70px;
position:absolute;
top: 20px;
left: 20px;
margin:0px;
padding:0px;
background-color: #DDD;
}



HTML :

<div id="bloc1A">
<div id="bloc2A">2
</div>1
</div>

<div id="bloc1B">
<div id="bloc2B">2
</div>1
</div>


Rien de plus bête en somme...

(Pour rappel : mon systeme fonctionne sous Firefox, et pas sous IE7)
Modifié par stephan53 (03 May 2010 - 20:29)

Tes blocs sont effectivement bien positionné, mais aucune information de superposition n'est renseignée (propriété CSS z-index). Il y a un article à ce sujet parmi les astuces du site.

Ta syntaxe étant correcte, il est probable que selon les navigateurs, l'interprétation de superposition diffère lorsque l'information n'est pas renseignée.

J'y pensais au z-index.

Mais en même temps, est-ce qu'avec des z-index différents mon bloc 1 transmettra son opacité au bloc 2 ? (Car cela m'arrangeait!)

Oui : un bloc ayant une opacité de 50% contenu dans un bloc ayant la même opacité donnera le même rendu qu'un seul bloc étant opaque à 25%.

Je viens de tenter avec les z-index, mais rien à faire mon bloc2 reste tronqué, limité par les contour du bloc 1 situé "dessous" lui...

Sous FF, aucun probleme... Que ce soit avec une simple opacité (opacity: 0.5;) ou avec un script nettement plus complexe (effet de fadein sur onmouseover et de fadeout sur onmouseout).

J'ai lu cette nuit des histoires de "width minimum" à déclarer sur le bloc1, avec IE, sous peine de ne pas avoir d'opacité... Cette question de "width" me titille car, même si dans mon code j'ai bien une "width" sur mes 2 blocs, mon bloc2 est limité par la width de mon bloc1...


Je pourrais aussi essayer de créer un bloc "bidon", vide, sous le bloc1, et de largeur supérieure ou égale à mon bloc2... et sur lequel j'appliquerais ma propriété d'opacité. Ceci dit tout ce qui sera au dessus sera aussi affecté par l'opacité, donc mon texte, les photos illustratives, etc etc...

Bref ça ne me semble pas la solution la plus simple et directe.
Modifié par stephan53 (03 May 2010 - 21:47)

bonsoir,

Pour IE7/8 , il te faudra faire usage de (deux) png opaque (autant appliquer ceux ci a tout les nav ) , l'astuce n'est pas applicable dans ton cas . (il te faut conjointement un positionement relatif ou absolu au filtre:alpha ... et c'est le clippage assuré , le parent devient hermétique )

Pour ie6 , laisser tomber la transparence sinon , il faudra aussi gérer les effets de bords sur les liens qui deviennent incliquable ... par exemples

GC

Bonjour et merci.

Pourrais-je avoir qq explications sur le premier paragraphe, je n'ai pas très bien saisi...


Modifié par stephan53 (04 May 2010 - 12:17)

stephan53 a écrit :
Bonjour et merci.

Pourrais-je avoir qq explications sur le premier paragraphe, je n'ai pas très bien saisi...

gc-nomade a écrit :
bonsoir,

Pour IE7/8 , l'astuce n'est pas applicable dans ton cas . (il te faut conjointement un positionement relatif ou absolu au filtre:alpha ... et c'est le clippage assuré , le parent devient hermétique )

tout ce qui va depasser du conteneur qui reçoit : un positionement absolut ou relatif et un filtre ne sera pas visible dans IE7 .
Dans IE8 ça depasse mais l'effet d'opacité ne s'applique que sur le parent ...
Dans les deux cas , ça ne passe pas comme ça .

a mon sens il te faut trouver une autre methode applicable a l'ensemble des navigateurs récents , a base de png opaque par exemple plutot qu'une regle de style , ... en partant de ton exemple , ce n'est que mon avis .

GC

D'accord, cette fois-ci c'est compris, merci.


(PS : pourquoi "opaque", le png ? (Tu veux sans doute dire plutôt le contraire, ou en tous cas en "transparence partielle" ?)


Edit : Ok, j'y suis... Au temps pour moi.

(En fait par rapport à mon cas concret je pense plutôt à un png 100% transparent sur la zone "qui doit dépasser", et non-transparent (semi-transparent en fait) sur la zone "Bloc1" - ceci par rapport au design que je dois reproduire, dont je n'ai pas parlé ici pour ne pas alourdir...)
Modifié par stephan53 (04 May 2010 - 22:40)

#bloc1B {
width: 70px;
height: 120px;
position:absolute;
top: 40px;
left: 40px;
margin:0px;
padding:0px;	
background-color: #AAA;
filter:alpha(opacity=40);
opacity: 0.4;
z-index:1;
}
#bloc2B {
width: 100px;
height: 70px;
position:absolute;
top: 60px;
left: 60px;
margin:0px;
padding:0px;	
background-color: #CCC;
z-index:2;
}
#bloc {
position:relative;
}

<div id="bloc">
  <div id="bloc1B"> 1 </div>
  <div id="bloc2B">2 </div>
</div>

As-tu pensé de faire comme ça

Bonjour,

Je viens de tester, mais sans succès. C'était quoi l'idée ?

(En tous cas ça me semble une piste à exploiter, car passer par des PNG crée de nouveaux problemes : par exemple tout simplement le "lancement" de mon changement d'opacité au survol du texte ou des images de ma page - normal le PNG transparent dépasse largement le cadre du menu "bloc1")

Victoire j'y suis


Explications :
- sur bloc 1, je mets une propriété d'opacité (CSS) /pour avoir dès le départ un peu de transparence
- sur bloc 2, je mets aussi une propriété d'opacité (CSS) /même chose...


Dans la page HTML, c'est sur le bloc 2 que je mets mon comportement de fadein/fadeout (au lieu de bloc1). D'où dans le HTML, j'écris :

<div id="bloc1"></div>
<div id="bloc2" onmouseover="blablabla" onmouseout="blablabla"></div>

au lieu de :
<div id="bloc1" onmouseover="blablabla" onmouseout="blablabla">
<div id="bloc2"></div>
</div>


+ Je bidouille un peu les positionnements sous CSS (pour que mes 2 blocs soient bien recadrés, suite au repositionnement des div).



Au final, la réécriture du code HTML rend mes 2 blocs "autonomes", donc les comportements d'opacité n'affectent pas les 2 à la fois. Au final le résultat est plus clair sous la souris d'ailleurs, en plus sous IE, ça fonctionne...


Ouf (et merci pour vos aides respectives)
Modifié par stephan53 (05 May 2010 - 14:13)