AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 07 06 01:27:58
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Sujet : transparance selective dans tableau HTML [ CSS / Général ] (ju0123456789)

mardi 19 août 2008 à 16:06:34 | transparance selective dans tableau HTML

ju0123456789
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'
mardi 19 août 2008 à 16:33:45 | Re : transparance selective dans tableau HTML

Zobibol
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>
    <body>
        <div id="tranparentDiv" style="position:absolute;top:50px;left:50px; width:150px; height:150px;"></div>
        <table style="position:absolute;top:50px;left:50px; width:150px; height:150px; z-index:1001;">
            <tr>
                <td style="color:blue">Bleu</td>
                <td style="color:yellow">Jaune</td>
            </tr>
            <tr>
                <td style="color:black">Noir</td>
                <td style="color:silver">Argent</td>
            </tr>
        </table>
    </body>
</html>

et voilà maintenant, il faut bien penser à définir la taille de la div de fond (id:"tranparentDiv").
[o-_-o]
mardi 19 août 2008 à 16:38:03 | Re : transparance selective dans tableau HTML

ju0123456789
Bonjouur et merci de ton message

Je n'utilise pas de div mais TABLE, est-ce que cela a une importance ?
mardi 19 août 2008 à 16:50:40 | Re : transparance selective dans tableau HTML

Zobibol
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]
mardi 19 août 2008 à 17:00:34 | Re : transparance selective dans tableau HTML

ju0123456789

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>
<body>
<div  ID="transparence">
<TABLE style="z-index:1001" WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0" ALIGN="center" HEIGHT="598">
<TR  style="color:black" ONMOUSEOVER="this.bgColor='#ff9900'" ONMOUSEOUT="this.bgColor='#ffffff'" >blablabla <TD>bloblo</td></tr>

</table>
</div>
</body>
</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.
mardi 19 août 2008 à 17:46:27 | Re : transparance selective dans tableau HTML

ju0123456789
 -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
mardi 19 août 2008 à 18:06:23 | Re : transparance selective dans tableau HTML

ju0123456789
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)
mercredi 20 août 2008 à 09:49:08 | Re : transparance selective dans tableau HTML

ju0123456789
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
mercredi 20 août 2008 à 09:52:20 | Re : transparance selective dans tableau HTML

Zobibol
Réponse acceptée !
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>
<body bgcolor="yellow">
<div  ID="transparence" class="TableContent"></div>
<TABLE style="z-index:1001" WIDTH="500px" BORDER="0" CELLSPACING="0" CELLPADDING="0" height="598" class="TableContent">
<TR  style="color:black" ONMOUSEOVER="this.bgColor='#ff9900'" ONMOUSEOUT="this.bgColor='#ffffff'" ><td>blablabla</td> <TD>bloblo</td></tr>

</table>

</body>
</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>
<body bgcolor="yellow">
<div  ID="transparence" class="TableContent"></div>
<TABLE style="z-index:1001" WIDTH="500px" BORDER="0" CELLSPACING="0" CELLPADDING="0" height="598" class="TableContent">
<TR  style="color:black" ONMOUSEOVER="this.bgColor='#ff9900'" ONMOUSEOUT="this.bgColor='#ffffff'" ><td>blablabla</td> <TD>bloblo</td></tr>

</table>

</body>
</html>
Et en plus elle est bien positionnée.
[o-_-o]
mercredi 20 août 2008 à 10:15:27 | Re : transparance selective dans tableau HTML

ju0123456789
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'


Cette discussion est classé dans : tableau, fond, transparence, css, opacity

Répondre à ce message

Sujets en rapport avec ce message

changer limage de fond d'un tableau [ par lumesh ] Salut,Bon oila, je suis a la recherche de la maniere pour modifier limage de fond d'une cellule d'un tableau avec javascript lors d'un rollover su cel Voile assombrissant [ par cartman1706 ] Bonjour, je suis en train de creer mon forum, et je voudrais que pour l'affichage de chaque posts, le fond (du tableau contenant le post) soit legerem Voile assombrissant [ par cartman1706 ] Bonjour, je suis en train de creer mon forum, et je voudrais que pour l'affichage de chaque posts, le fond (du tableau contenant le post) soit legerem liens dans une feuille de style [ par phelsuma ] Salut tout le monde,Ce topic fait suite à celui-ci :  http://www.javascriptfr.com/infomsg_INTEGRER-HT étirer image avec du css [ par eax ] bonsoir,je souhaite mettre une image en fond dans un tableau (dans la balise TD). je souhaiterai que cette image soit étirée, qu'elle prenne toute la Image centrée en fond de tableau... [ par orelien ] Bonjour,J'aimerais placer une image en fond d'un tableau mais centrée...Merci.Orélien. changement background 'un TD ? [ par caviar ] Saluté olala ... je vais me faire engueuler si un adepte du css lit ça ... mais en css ça passe pas ... alors je suis à l'ancienne sur ce coup ...j'ai image de fond [ par nicomilville ] Bonjour j'ai un fichier design dans lequel il y a mon fichier "design.css" et une image "dégradé1.bmp".Et dans mon fichier css j'ai mis la ligne de co PNG perd sa transparence sous IE6 [ par ju0123456789 ] Bonjour à vous !Quelq'un peut-il m'aider svp ?Je met des images en PNG24 avec un fond transparent (aux chiottes les GIF !! lol), mais quand on a IE6 o tableau et css... [ par kalif ] bonjour a tous,dans une page html, j'utilise plusieurs fois le code ci dessous pour créer une "étiquette" mais le problème est que je compte utiliser


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


RIM BlackBerry Storm 9530
Entre 72€ et 72€


Visiter le guide achat

Photothèque Nouveau !

Photo sitges beachPhoto Cockpit Airbus A320
Photo jeune fille plagePhoto adolescente plage

Visiter la photothèque


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,484 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.