CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 14 09:41:39

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil > Forum >

transparance selective dans tableau HTML

Poser une question dans le forum ou lancer une discussion

transparance selective dans tableau HTML

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

ju0123456789

112 msg

392 msg CS

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

455 msg

456 msg CS

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

112 msg

392 msg CS

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

455 msg

456 msg CS

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

112 msg

392 msg CS

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

112 msg

392 msg CS

-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

112 msg

392 msg CS

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

112 msg

392 msg CS

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

455 msg

456 msg CS

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

112 msg

392 msg CS

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ée 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

Livres en rapport

Aide-mémoire CSS 2

Programmation VBScript et CSS

Je crée mes tableaux et graphiques avec Word 2000

Excel 2002. Fonctions avancées

Tous les livres pour Tableau, Fond, Transparence, Css, Opacity

Nos sponsors

Derniers Blogs

SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System