Probleme de filtre alpha

[vinom]

Salut, j'essaye de faire une box de commentaire sur une lien avec le fond du cadre legerement transparent pour montrer les images a l'arriere plan. J'utilise des filtres alpha dans mes tableaux mais le probleme est que tous les cadres a l'interieur du tableau principal prennent la meme propriete que le cadre de base avec une opacite reduite et ce meme si je leur assigne des class differentes et que j'applique le filtre alpha que sur le premier cadre.

Pour vous donner un exemple... voici mon code css et les 2 cadres en question, le texte a l'interieur du 2eme cadre est lui aussi transparent a 60% alors que je voudrais qu'il ne le soit pas...

................................................................................

............................

<style>

table.box { border: 1pt solid #000000; }

table.text { color: #FF0000; }

td.transparent { background-color:#CCCCCC; filter:alpha(opacity=60); }

</style>

...

<table class="box">

<tr><td class="transparent">

<table class="text">

<tr><td>

Le texte ici

</td></tr>

</table>

</td></tr>

</table>

................................................................................

....................

Voila si quelqu'un a une idee pitier je suis desesperer j'ai tout essayer

Modifié 2 Mai 2005 par vinom

[Dudu]

Attribut propriétaire. Ne marche que dans internet Explorer. Invisible sur de vrais navigateurs

[vinom]

Je sais mais je tiens quand meme a trouver la solution ne serai-ce que pour ma propre culture et aussi un peu pour les 98% d'utilisateurs sur mon reseau qui utilisent un "faux" navigateur (Explorer)

[davidm]

Dudu, on peut définir l'opacité sur d'autres navigateurs en utilisant opacity: .6 par exemple qui est équivalent à filter:alpha(opacity=60), qui marche dans safari et mozilla. Mozilla comprend aussi moz-opacity, même syntaxe (chiffre entre 0 et 1).

Vinom, ton problème est que tes cellules (TD) sont imbriquées. Cela fait bien longtemps que je n'utilise plus les tableaux, mais côté CSS ta cellule imbriquée hérite de la propriété définie dans ta cellule parente (celle qui contient les autres). D'où ton problème...

Ce qu'il faut faire c'est assigner une classe à tes cellules "filles" (celles qui sont contenues et que tu ne veux pas transparentes), en faisant comme ça :

td.opaque {filter:alpha(opacity=100); }

Cela te permet de "remettre à zéro" la propriété héritée

Modifié 2 Mai 2005 par davidm

[Dudu]

Je sais j'utilise l'opacité sur mon site perso, sur les input text en focus. Juste pour embêter les Exploriens et même les firefoxiens (je n'ai d'ailleurs toujours pas compris pourquoi chez Mozilla ils ont pris la peine de développer un format propriétaire sans supporter l'équivalent standard..).

Modifié 2 Mai 2005 par Dudu

[davidm]

Ok, oui j'avoue que c'est tentant de teaser !

Pour Mozilla ils ont développé du propriétaire en attendant (moz-opacity) mais ils supportent aussi opacity est une propriété CSS3 "standard" (du moins, futur...)

[Dudu]

Ok, oui j'avoue que c'est tentant de teaser !

Sur ce genre de sites (site perso) c'est mon plus grand amusement. Jouer avec des propriétés CSS que pas mal de navigateurs n'ont pas encore implémenté, je trouve çà excellent (outline, opacity ..)

Pour Mozilla ils ont développé du propriétaire en attendant (moz-opacity) mais ils supportent aussi opacity est une propriété CSS3 "standard" (du moins, futur...)

Mozilla et Firefox supportent l'opacity ? Tiens, mes derniers test n'étaient pas concluants Je vais ressayer..

En tous cas, ce que je disais peut s'appliquer à IE, du coup. Surtout que sur le site du MSDN, ils expliquent bien comme il faut comment styler son html: des trucs du genre onMouseover="this.filters.alpha.opacity=100"

Bref.

vinom: je te comprends si c'est dans le cadre d'un intranet et que toute la boîte a le bonheur de surfer sous IE. Mais je suis pas partisan des techniques proprios même dans des cas comme celui-ci: ma raison est simple. Si on apprend avec de mauvaises bases, que fera-t-on quand il faudra faire un boulot de plus grande envergure ? Bon, là, c'est vrai il n'y a pas moyen de faire de l'opacité standard avec Explorer.

Et pour ton problème (çà y est j'arrête le hors-sujet !), qui aurait été le même avec un attribut standard, c'est à cause du principe même de cascade (CSS= Cascading Style Sheets). Tu attribues une opacité de 60% à une balise. Toutes les balises "enfants" comprises dans cette balise vont en hériter

[vinom]

Ce qu'il faut faire c'est assigner une classe à tes cellules "filles" (celles qui sont contenues et que tu ne veux pas transparentes), en faisant comme ça :

td.opaque {filter:alpha(opacity=100); }

Cela te permet de "remettre à zéro" la propriété héritée

<{POST_SNAPBACK}>

Merci pour ta reponse avant tout J'ai tester le code que tu viens de me donner mais en ce qui concerne le texte contenu dans la cellule fille apparemment ca ne veux pas remettre a zero la propriete heritee. J'ai meme essayer de les mettre sur un z-index plus elever mais rien n'y fait

[vinom]

Et pour ton problème (çà y est j'arrête le hors-sujet !), qui aurait été le même avec un attribut standard, c'est à cause du principe même de cascade (CSS= Cascading Style Sheets). Tu attribues une opacité de 60% à une balise. Toutes les balises "enfants" comprises dans cette balise vont en hériter

<{POST_SNAPBACK}>

En effet je pense que c'est tout mon probleme Et tu as raison c'est pas genial sur les gros sites et d'ailleurs le mien en est un mais ce que je souhaite afficher avec cette focntion n'a pas une grande incidence si ca ne s'affiche pas pour un faible pourcentage des visiteurs... si c'etais mon menu j'y reflechirai a 2 fois mais bon pour mettre une bulle d'infos que tu retrouve sur toutes les autres pages en texte dur je croit pas que ca va deranger ceux qui la verrons pas... enfin bon merci pour les reponses

[Dudu]

J'ai tester le code que tu viens de me donner mais en ce qui concerne le texte contenu dans la cellule fille apparemment ca ne veux pas remettre a zero la propriete heritee. J'ai meme essayer de les mettre sur un z-index plus elever mais rien n'y fait 

Attention je vais poser une question bête tu as pensé à remplacer aussi le <td> adéquat par un <td class="opaque"> pour que la propriété soit reconnue ?

C'est le coup classique, çà m'est arrivé un nombre incalculable de fois ...

Et tu as raison c'est pas genial sur les gros sites et d'ailleurs le mien en est un mais ce que je souhaite afficher avec cette focntion n'a pas une grande incidence si ca ne s'affiche pas pour un faible pourcentage des visiteurs... si c'etais mon menu j'y reflechirai a 2 fois mais bon pour mettre une bulle d'infos que tu retrouve sur toutes les autres pages en texte dur je croit pas que ca va deranger ceux qui la verrons pas... enfin bon merci pour les reponses 

Non, çà ne va pas déranger. L'absence d'éléments purement décoratifs est rarement gênante. Mais le mieux dans ce cas serait de mettre un attribut standard dans la CSS puis de court-circuiter IE via un Javascript pour qu'il lise les attributs qui l'intéresse. Ou bien de piloter sa CSS via du PHP. Oui je sais çà fait du boulot en plus alors que ton problème n'est même pas résolu Mais avec un peu de chances, Internet Explorer 7 va peut-être implémenter certaines fonctions CSS standards que la version 6 ignore, et il est préférable de se tourner vers des solutions viables que de rester sur des formats proprios qui n'ont qu'un temps (les 3 navigateurs que j'utilise le plus régulièrement ignorent parfaitement le tag propriétaire <blink> par exemple.. et beaucoup de navigateurs en général émulent le tag <marquee> plus qu'ils ne l'implémentent).

Et surtout la côte de popularité d'Explorer est gravement en baisse en ce moment

Enfin bon

[vinom]

Je prends tout ca en note J'ai regler mon probleme en faisant afficher ca de maniere completement differente et ailleurs mais je reste sur ma faim quand meme quand a la solution de cette enigme (oui j'ai aussi attribuer la classe a l'autre td rien a faire lol pourtant j'ai un site qui le reussi a merveille...)

http://mythong.textamerica.com/ les liens sur les images.

Enfin bon comme tu dis... au moins maintenant ils vont tous pouvoir aprecier le changement

Modifié 3 Mai 2005 par vinom

[Xavier]

Ok, oui j'avoue que c'est tentant de teaser !

Pour Mozilla ils ont développé du propriétaire en attendant (moz-opacity) mais ils supportent aussi opacity est une propriété CSS3 "standard" (du moins, futur...)

<{POST_SNAPBACK}>

On peut ajouter que quand ils ont implémenté -moz-opacity, la recommandation était au stade de document de travail (working draft), donc susceptible d'être fortement modifié. Ça aurait été bête d'implémenter "opacity" et de risquer de voir la recommandation changer (ce qui arrive fréquemment avec les documents de travail) et d'avoir une implémentation erronnée de opacity. Donc ils ont créé -moz-opacity, uniquement pour tester.

Maintenant, opacity est contenu dans une "candidate recommandation" dont on peut raisonnablement s'attendre à ce qu'elle ne soit pas modifiée

Il en va de même pour les -moz-border-radius et les -moz-column-*, lorsqu'ils seront des CR ils deviendront border-radius et column-*.

Modifié 3 Mai 2005 par Xavier

[davidm]

Merci pour ta reponse avant tout J'ai tester le code que tu viens de me donner mais en ce qui concerne le texte contenu dans la cellule fille apparemment ca ne veux pas remettre a zero la propriete heritee. J'ai meme essayer de les mettre sur un z-index plus elever mais rien n'y fait 

<{POST_SNAPBACK}>

Je suis supris... mais comme je dis je n'utilise plus les tableaux dont je suis un peu rouillé...

essaye quand même de rajouter la déclaration !important sur td.opaque, ça peut marcher