CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| Background-color transparent pour IE | |
| Invité Invité
| Bonjour, j'ai mis ce code dans 2 pages HTML de mon forum (phpbb2), pour avoir le background-color transparent. Ca marche sous Firefox (que j'utilise) mais pas sous IE : au lieu d'avoir le fond transparent, c'est blanc. - Code:
-
body { background-color: transparent; background-image: none; } Plusieurs de mes membres utilisent IE, mais pas moi, il y a trop de problème avec les apparences. Merci de votre aide |
Dernière édition par vla le Ven 12 Nov 2010, 13:03, édité 1 fois | |
| | | #_Holigan
{ Membre }
Messages : 79
| C'est tout le problème d'IE. Ca fait partie des trucs qu'il ne gère pas é__è Si ça peut t'aider, un sujet avait déjà été créé à ce sujet, mais est apparemment resté sans réponse. http://www.css-actif.com/resolu-f18/cloture-pitbull-iframe-transparent-t550-15.htm? | | |
| | | Invité Invité
| Si tu veux du transparent, c'est rgba Puis mets toi à la page IE n'est pas de taille pour prévisualiser ses sites, forum en test. Mais je te donne ce code. - Code:
-
body{ background-color: rgba(255,255,255,0.2); background-image: none; }
Je t'ai donner, des valeurs que je n'ai pas modifié, mais tu peux le modifié en regardant sur google, tout est expliquer pour modifier les valeurs | | |
| | | Invité Invité
| Merci #_Holigan pour ton lien mais j'avais déjà lu le sujet. Merci Teal pour ton code mais en faisant des recherches, j'ai vu que ça ne marche pas sous IE6, 7 et 8, et justement je voudrai que ça marche pour IE. Je l'ai vue dans cet exemple de ce sujet Par contre, plus loin dans le sujet, ils mettent ce code pour faire un filtre Gradient pour IE : - Code:
-
<style type="text/css"> .opacite { width: 50%; background-color: rgb(0, 0, 255); /* alternative solide */ background-color: rgba(0, 0, 255, 0.2); } </style> <!--[if IE lte IE 8]> <style type="text/css"> .opacite { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000ff,endColorstr=#000000ff); zoom: 1; } </style> <![endif]--> Est-ce qu'une personne, ayant IE récent, peut essayer, s'il vous plaît ? Je n'ai pas IE. Merci beaucoup | | |
| | | Invité Invité
| - vla a écrit:
- Merci #_Holigan pour ton lien mais j'avais déjà lu le sujet.
Merci Teal pour ton code mais en faisant des recherches, j'ai vu que ça ne marche pas sous IE6, 7 et 8, et justement je voudrai que ça marche pour IE. Je l'ai vue dans cet exemple de ce sujet
Par contre, plus loin dans le sujet, ils mettent ce code pour faire un filtre Gradient pour IE : - Code:
-
<style type="text/css"> .opacite { width: 50%; background-color: rgb(0, 0, 255); /* alternative solide */ background-color: rgba(0, 0, 255, 0.2); } </style> <!--[if IE lte IE 8]> <style type="text/css"> .opacite { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000ff,endColorstr=#000000ff); zoom: 1; } </style> <![endif]--> Est-ce qu'une personne, ayant IE récent, peut essayer, s'il vous plaît ? Je n'ai pas IE. Merci beaucoup Comment veux-tu voir que ça marche sous IE si tu ne l'as pas? ^^" Bon je vais essayer de tester sous IE... Patience cher ami | | |
| | | Riku Asakura
{ Membre }
Messages : 69
| Bonjour,
Première question : pourquoi un background transparent sur un body ? Deuxième question : as-tu essayé simplement background: transparent none; ?
Je n'ai jamais eu de problème avec IE de ce point de vu là. Le background est une des propriétés qui pose le moins de souci, contrairement à la couleur même des éléments (color, border-color, etc.)
Bon courage | | |
| | | Invité Invité
| En analysant le lien que tu m'as donné, j'ai pu voir qu'il y a des condition pour que cela marche, et tu n'as pas lu tout ou tu ne l'as pas vu, donc je te conseille de voir ceci: ici Pourrais-tu me passer ton template où tu as placé ta transparence et ton CSS s'il te plaît?
Pendant ce temps je teste de ce que tu veux faire | | |
| | | Invité Invité
| - Riku Asakura a écrit:
- Première question : pourquoi un background transparent sur un body ?
Parce que je voulais que toute la page soit en transparent. - Riku Asakura a écrit:
- Deuxième question : as-tu essayé simplement
background: transparent none; ? Non, mais ça ne rien va à ça ? - Code:
-
background-color: transparent; background-image: none; - Riku Asakura a écrit:
- Je n'ai jamais eu de problème avec IE de ce point de vu là
Pourtant ma page HTML insérée à gauche dans les widgets à le fond blanc et pareil pour la page HTML tout en bas du forum. - Teal a écrit:
- Pourrais-tu me passer ton template où tu as placé ta transparence et ton CSS s'il te plaît?
Voilà pour la page HTML qui me sert pour la colonne des widgets de gauche : - Code:
-
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="/67-ltr.css" type="text/css"> <style type="text/css"> html, body { background-color: transparent; background-image: none; color: #909090; } a:link, a:visited { color: #909090; text-decoration: none; } a:hover { color : #001a32; text-decoration: none; } .lien { text-decoration: none; } .clignotant { text-decoration: blink; }
a.onglets:link, a.onglets:visited, .onglets { width:130px; height:24px; display:block; padding-top: 6px; background-image:url('http://i27.servimg.com/u/f27/13/97/83/30/sa_fon22.png'); border: solid 0px #818C96; border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; padding-left: 10px; font-size: 12px; font-weight : bold; text-align: center; color: #ffffff; text-shadow: 0px 3px 3px rgb(17, 83, 138); } a.onglets:hover { width:130px; height:24px; display:block; background-image:url('http://i27.servimg.com/u/f27/13/97/83/30/sa_ong27.png'); border: solid 0px #818C96; border-radius : 10px 0px 10px 0px; -moz-border-radius : 10px 0px 10px 0px; -webkit-border-radius : 10px 0px 10px 0px; } </style>
</head><body>
<table width="180" border="0"><tr><td><div align="center">
<a href="http://servactif.forum-pro.fr/index.htm" class="onglets" target="_top">Accueil</a> <img src="http://2img.net/i/fa/empty.gif" height="5"> <a href="http://servactif.forum-pro.fr/" class="onglets" target="_top">Top liste</a> <img src="http://2img.net/i/fa/empty.gif" height="5"> <a href="http://servactif.forum-pro.fr/profile.forum?mode=editprofile" class="onglets" target="_top">Profil</a> <img src="http://2img.net/i/fa/empty.gif" height="5"> <a href="http://servactif.forum-pro.fr/msg.forum?folder=inbox" class="onglets" target="_top">Messagerie</a> <img src="http://2img.net/i/fa/empty.gif" height="5"> <a href="http://servactif.forum-pro.fr/profile.forum?mode=register" class="onglets" target="_top">S'inscrire</a> <img src="http://2img.net/i/fa/empty.gif" height="5"> <a href="http://servactif.forum-pro.fr/login.forum?connexion" class="onglets" target="_top">Connexion</a> <img src="http://2img.net/i/fa/empty.gif" height="5"> <a href="http://servactif.forum-pro.fr/login.forum?logout=true" class="onglets" target="_top">Déconnexion</a>
</div></td></tr></table>
<br><br>
<table border="0"><tr><td><div align="center"> <table style="border: solid 0px #818C96; border-radius : 10px 10px 10px 10px; -moz-border-radius : 10px 10px 10px 10px; -webkit-border-radius : 10px 10px 10px 10px; padding-left: 10px; background: #C6D1D6 url('http://i27.servimg.com/u/f27/13/97/83/30/sa_fon22.png'); font-size: 12px; font-weight : bold; text-align: right; padding-right: 15px; color: #ffffff; text-shadow: 0px 3px 3px rgb(17, 83, 138);" width="175" height="36"><tr><td>Annonces</td></tr></table>
<table width="100%" class="widget_fondmilieu" border="0"><tr><td><div align="center"><br>
L'index de ServActif a<br>changé d'apparence.<br>Les autres pages<br>sont en encours de<br>refonte. <br> <a href="http://servactif.forum-pro.fr/reglement-annonces-f2/que-pensez-vous-de-la-nouvelle-apparence-de-servactif-t34.htm" target="_blank"><b>Que pensez-vous<br>de cette apparence ?<br>Sondage</b></a><br><br><br> <b><a href="http://servactif.forum-pro.fr/reglement-annonces-f2/servactif-recrute-t2.htm" target="_top" class="lien">ServActif recrute 1 modérateur et 4 créateurs graphiques</a></b>
<br><br></div></td></tr></table>
<table width="100%" border="0" class="widget_fondbas"><tr><td></td></tr></table> </div></td></tr></table>
<br><br>
<table border="0"><tr><td><div align="center"> <table style="border: solid 0px #818C96; border-radius : 10px 10px 10px 10px; -moz-border-radius : 10px 10px 10px 10px; -webkit-border-radius : 10px 10px 10px 10px; padding-left: 10px; background: #C6D1D6 url('http://i27.servimg.com/u/f27/13/97/83/30/sa_fon22.png'); font-size: 12px; font-weight : bold; text-align: right; padding-right: 15px; color: #ffffff; text-shadow: 0px 3px 3px rgb(17, 83, 138);" width="175" height="36"><tr><td>Top Liste</td></tr></table>
<table width="100%" class="widget_fondmilieu" border="0"><tr><td><div align="center"><br>
<a href="http://servactif.forum-pro.fr/top-liste-f4/listing-des-offres-top-liste-t26.htm#72" target="_top" class="lien"><b><u>Offres Top Liste :</u></b><br><br><span class="clignotant"><b>
<font color="red">Votez toutes les<br>1/2 heures</font><br>Samedi 13 octobre <br><br> <font color="red">10</font> votes<br>supplémentaires si<br>vous faites connaitre<br>ServActif et sa<br>Top Liste <br><br> Démarrage à <font color="red">20</font><br>votes pour les<br>nouveaux inscrits
</a></b></span>
<br><br><br><b><a href="http://servactif.forum-pro.fr/" target="_top"><u>Accéder à la<br>Top Liste</u></a></b><br><br>Limitée à 1 clic<br>par heure et par<br>personne.<br><br><br><b><a href="http://servactif.forum-pro.fr/top-liste-f4/formulaire-top-liste-t3.htm" target="_top" class="lien"><u>Ajouter votre site,<br>forum ou blog</u></a></b>
<br><br></div></td></tr></table>
<table width="100%" border="0" class="widget_fondbas"><tr><td></td></tr></table> </div></td></tr></table>
</body></html> CSS : - Code:
-
.widget_fondmilieu { background-image: url('http://i27.servimg.com/u/f27/13/97/83/30/sa_wid15.png'); background-repeat: repeat; width: 164px; font-size: 12px; } .widget_fondmilieu_traduction { background-image: url('http://i27.servimg.com/u/f27/13/97/83/30/sa_wid15.png'); background-repeat: no-repeat; width: 164px; height: 168px; font-size: 12px; } .widget_fondbas { background-image: url('http://i27.servimg.com/u/f27/13/97/83/30/sa_wid16.png'); background-repeat: no-repeat; width: 164px; height: 8px; font-size: 12px; } | | |
| | | Invité Invité
| Je suis désolé, mais je vois >.<" Si un de mes collègues ne peuvent pas t'aider, il faudra songer pour IE. Puis il y a très peu de personne qui navigue avec IE.
Désolé, mais mon pouvoir de recherche s'arrête ici, je vais essayer de communiquer ce sujet à mes collègues. | | |
| | | Riku Asakura
{ Membre }
Messages : 69
| Si tu places un background transparent sur body, ce n'est que le body qui sera affecté par ce fond transparent. Or derrière un body il y a éventuellement l'élément HTML, mais il n'est pas utilisé pour placer de la couleur de fond par forum-actif.
Donc un fond de body transparent ne sert absolument à rien, sauf si tu veux voir un fond placé sur l'élément HTML...
Ma syntaxe raccourcie permet de se concentrer sur la totalité des propriétés liées au background. Mais effectivement nos deux syntaxes sont quasiment équivalente.
Pour pouvoir t'aider je t'invite à nous donner l'url où le problème est visible, et nous dire ce qui te gêne et ce que tu souhaiterais obtenir.
Merci bien. | | |
| | | Invité Invité
| - Citation :
- Pour pouvoir t'aider je t'invite à nous donner l'url où le problème est visible, et nous dire ce qui te gêne et ce que tu souhaiterais obtenir.
Les 2 pages en question : http://servactif.forum-pro.fr/-h4.htm et http://servactif.forum-pro.fr/-h7.htm Ils sont en iframe sur l'index http://servactif.forum-pro.fr/index.htm (la 1ère page est dans la colonne des widgets de gauche et la 2ème page est tout en bas du forum). Ce qui me gêne : que le fond des 2 pages soient blanc au lieu de transparent (pour IE) Ce que je souhaiterai obtenir : un fond transparent au lieu de blanc. Mais comme ces 2 pages sont visible en iframe, ça serai pas bon de mettre du code du genre : - Code:
-
<iframe src="ADRESSE" style="background-color: transparent; overflow: hidden !important;" width="LARGEUR" height="HAUTEUR" scrolling="no" frameborder="0" allowtransparency="true"></iframe> Merci | | |
| | | Riku Asakura
{ Membre }
Messages : 69
| Ah, voilà, c'est un problème d'iframe, pas de fond des pages filles. il faut rajouter ça dans l'élément iframe : - Code:
-
style="filter: chroma(color=#ffffff)" allowtransparency="true" Ainsi tu obtiendras un code dans ce genre : - Code:
-
<iframe src="ADRESSE" style="background-color: transparent; overflow: hidden !important; filter: chroma(color=#ffffff);" width="LARGEUR" height="HAUTEUR" scrolling="no" frameborder="0" allowtransparency="true"></iframe> J'espère que ça règlera ton problème. Bonne continuation | | |
| | | Invité Invité
| Voilà, j'ai mis ton code. Merci Si tu as IE, si tu pouvais regarder ce que ça donne. Merci beaucoup d'avance | | |
| | | Invité Invité
| Par ici. Voilà de ce que je vois sous IE. Désolé | | |
| | | Riku Asakura
{ Membre }
Messages : 69
| Hello, Je ne sais pas quand tu as pris les screenshots, mais chez moi ça s'affiche nickel sous IE8, IE7 et IE6. (Vista) Au plaisir PS : si c'est résolu tu peux éditer ton premier message pour placer l'icône Résolu | | |
| | | Invité Invité
| C'est normal, Teal, que sur la page HTML page d'accueil, ça n'a pas changé, j'ai oublié de modifier cette page. Désolé. Je viens de le faire. Tu me dire si c'est bon ? Merci
J'avais juste modifié dans l'index du forum. | | |
| | | Invité Invité
| Tu peux me passer le lien s'il te plaît. | | |
| | | Invité Invité
| Alors ici http://servactif.forum-pro.fr et ici aussi http://servactif.forum-pro.fr/index.htm Merci d'avance | | |
| | | Invité Invité
| Merci, je vais vite te visualiser ça.
Très bien, ça marche, ton cas est-il résolu? | | |
| | | Invité Invité
| Yes ! Merci beaucoup à tous Résolu | | |
| | | Invité Invité
| Tout le mérite vient à Riku Asakura! | | |
| | | Druyk
{ Membre actif }
Messages : 339
| Vu que le probléme est résolu, je déplace le sujet | | |
| | | Riku Asakura
{ Membre }
Messages : 69
| Mais non Teal, l'important c'est de fournir des efforts pour aider les autres Donc merci à toi. Merci m'sieur Druyk ! | | |
| | | Contenu sponsorisé
| | | | | Background-color transparent pour IE | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|