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

Ce site au démarrage

begin process at 2010 03 15 23:40:37

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

72 msg

279 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

385 msg

386 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

72 msg

279 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

385 msg

386 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

72 msg

279 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

72 msg

279 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

72 msg

279 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

72 msg

279 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

385 msg

386 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

72 msg

279 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

[WP7] L'éMULATEUR WINDOWS PHONE 7 EST MULTITâCHE par KooKiz

PRéSENTATION CLUB MOSS CE JOUR "LA NOUVELLE ARCHITECTURE DE SERVICES SHAREPOINT 2010". par Patrick Guimonet

[WINDOWPHONE7] PREMIERS PAS par Vko

[WP7] LE SDK DE WINDOWS PHONE 7 EST DISPONIBLE ! par KooKiz

SQL SERVER : PHP ET SQL SERVER par christian

Forum

RE : BBCODES: BESOIN DU SCRIPTS QUI MET LE BBCODES DANS LE FORMULAIRE par jessy51

CHRONO JAVASCRIPT DANS PAGE PHP par michaelminelli1

RE : VALIDATION D'UN FORMULAIRE par chantoung

RAFRAICHIR UNE DIV CONTENANT DU PHP par christophebuffet

PROBLèME LIGHTBOX SOUS IE8 par ronboss

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Application FLASH URGENT
Budget : 1 000€
Plaquette commerciale Urgent
Budget : 300€
Application Web service Site internet
Budget : 100€

Logiciels

Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods
Konvertor (4.00)
KONVERTOR (4.00)

Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format...

Cliquez pour télécharger Konvertor