1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Transparance selective dans tableau HTML [Résolu]

Signaler
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
 -
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
 -
Bonjour,

J'ai mis une image de fond que j'ai moi-même créée sous photoshop, pour moi elle déchire, mais le souci c'est que comme elel est multicolore, cela pose un petit problème de lecture quand je mets du texte sur cette page.
Je me suis donc dit que le mieux, pour voir le fond et que ce soit lisible, c'est que je fasse un tableau avec son propre fond, en transparence, come ça on voit mon fameux arrière plan et le texte.
Le truc, c'est que de la manière où je l'ai fait, l'écriture aussi se met en transparence.
Voici mon CSS : (tableau  id="transparence")

  #transparence
  {
    filter : alpha(opacity=50);
    -moz-opacity : 0.5;
    opacity : 0.5;
  }

(CSS le plus bête du monde.. lol)

1) Comment puis-je faire pour que l'ecriture ne soit pas en transparence ?

2) J'ai mis un onmouseon et ONMOUSEOUT sur chaqeu ligne de mon tableau pour faciliter la lecture, ce que change la couleur de la ligne au passage de la souris, et mon 2e probleme est que ces evenements sont aussi affectés à l'opacité mise par le CSS, comment faire pour que ces événements ne soient pas déclarés dans ce css ?

Merci d'avance.

Ju'
Afficher la suite

9 réponses

Réponse 1 / 9
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
 5
Salut, flute, alors, j'avais préparé la réponse qui va bien, mais j'ai fermer l'explorateur, en grande forme aujoud'hui,
Voilà en fait, il ne faut pas que la div contienne la table, j'en suis arrivé au résultat suivant:
<html>
<head>
<style type="text/css">

  #transparence
  {
    filter : alpha(opacity=10);
    -moz-opacity : 0.10;
    opacity : 0.50;
    z-index:1000;
    background-color:white;
  
  }
  .TableContent{
       position:absolute;
    top:50px;
    left:50px;
    width:500px;
    height:598px;
    overflow:hidden;
  }
</style>
</head>

blablabla, bloblo

</html>

Avec le positionnement !
<html>
<head>
<style type="text/css">

  #transparence
  {
    filter : alpha(opacity=10);
    -moz-opacity : 0.10;
    opacity : 0.50;
    z-index:1000;
    background-color:white;
  
  }
  .TableContent{
       position:absolute;
    top:50px;
    left:50px;
    width:500px;
    height:598px;
    overflow:hidden;
  }
</style>
</head>

blablabla, bloblo

</html>
Et en plus elle est bien positionnée.
[o-_-o]
Réponse 2 / 9
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
 5
bien le bonjour,
j'ai eu le même soucis que toi sur ce problème de transparence et la seule solution (que j'ai trouvé) est d'utiliser une div avec un z-index inférieur à celui de la table, un exemple vaut tous les mots ?

<html>
    <head>
        <title></title>
        <style>
                    #tranparentDiv
                  {
                    filter : alpha(opacity=50);
                    -moz-opacity : 0.5;
                    opacity : 0.5;
                    background-color:yellow;
                    z-index:1000;
                  }
                  body{
                      background-color:aqua;
                  }
        </style>
    </head>
   
       

                    ----

                Bleu,
                Jaune,
           
            ----

                Noir,
                Argent,
           
       

   
</html>

et voilà maintenant, il faut bien penser à définir la taille de la div de fond (id:"tranparentDiv").
[o-_-o]
Réponse 3 / 9
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
 1
Bonjouur et merci de ton message

Je n'utilise pas de div mais TABLE, est-ce que cela a une importance ?
Réponse 4 / 9
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
 5
justement oui il y a une importance, lorsqu'on applique le style opacity (ou filter:alpha(opacity=xx)), il s'applique à tous les fils du composant sur lequel on applique le style.
Pour contourner le problème, il y a deux choix:
- Créer une image png (avec transparence et l'appliquer comme background-image à la table
- Utilisé une div de fond qui aura l'opacité nécéssaire.

[o-_-o]
Réponse 5 / 9
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
 1
pour le png on va limiter les degats pour eviter une page trop lourde, car mon aimge de fond est déjà un png.
Bon, sans te mettre tout le code de ma page je te mets que l'essentiel (car ça ne marche pas avec mon code)

<html>
<head>
<style type="text/css">



  #transparence
  {
    filter : alpha(opacity=10);
    -moz-opacity : .10;
    opacity : 0.10;
    z-index:1000;
    background-color:white;
  }
</style>
</head>

blablabla bloblo,

</html>

Ce qui ne marche pas c'est la transparence, je n'ai plus rien de transparent :'( pourtant c'est bizarre, quand j'ai compilé uniquement ton code à toi ça marche.
Réponse 6 / 9
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
 1
 -moz-opacity : .10;

J'avais oublier le 0 devant  .10, mais cela ne change rien à mon problème.
avec le div je ne vois aucune transparence :'(

plz help
Réponse 7 / 9
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
 1
ah oui et une dernière chose, ça ne peut pas marcher si on ne met pas d'attributs au DIV ?
car le div est calé dans un cellule d'un tableau, et est aussi calé en fonction des dimensions de la table qui se trouve à l'intérieur du DIV.

Je dis ça juste comme ça, car ça se trouve (mais ça m'étonnerais beaucoup) le problème vient de là.

Bonne soirée et à demain j'espere :)  (parce que je bloc là dessus là, c'est vraiment bête)
Réponse 8 / 9
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
 1
Re bonjour !

Bon j'ai vu ma petite erreur, c'est bon je vois. Mais là il me fais autre chose, il ne veut pas superposer les 2, la div doit se placer à un certain endroit, donc j'ai dû le mettre en RELATIVE, je ne sais pas si c'est ça qui pose problème...

help plz plz plz
Réponse 9 / 9
Messages postés
436
Date d'inscription
mercredi 26 septembre 2007
Statut
Membre
Dernière intervention
2 juillet 2014
 1
Ok et bien merci, GG, enfin,  bien joué !
 :)
ça marche niquel de chez niquel, c'est exactement ce que je voulais, encore un GRAND merci !
passe une agréable journée :)

@+

Ju'
Répondre Posez votre question