njoyard Posté(e) le 10 février 2005 Partager Posté(e) le 10 février 2005 Salut Je cherche à utiliser de la transparence dans une page. Ma page a une image de fond et je voudrais y placer des <div> à fond blanc opaque à 50% (ces div étant susceptibles d'être n'importe ou sur la page). J'ai trouvé plusieurs moyens d'y parvenir plus ou moins. 1. Utiliser un PNG transparent L'idée est très simple, faire un PNG d'1 pixel blanc opaque à 50% (vu que le PNG supporte un canal alpha) et la mettre en fond des <div>. Le problème étant qu'IE ne supporte pas ce canal alpha. Cela dit, j'ai trouvé plusieurs pages permettant d'activer cette transparence sur des <img> et des <div>. En gros il faut mettre le style filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale'); Mais je sais pas si ça marche bien pour tous les éléments ni si c'est valable aussi pour un background... (edit: moi je suis pas arrivé à le mettre en place...) 2. Le Hack CSS de jesaisplusqui (désolé !) Là aussi l'idée est simple, sachant que pour un background uni: Le CSS3 prévoit une opacité avec opacity: 40%; IE permet aussi de le faire avec filter: alpha(opacity=0.4); Mozilla enfin supporte le paramètre -moz-opacity: 40%; Il "suffit" donc de créer un <div> ayant le style suivant: opacity: 40%; filter: alpha(opacity=0.4); -moz-opacity: 40%; background-color: #ffffff; Mais cela pose plusieurs problèmes : Sur mon IE (XP SP2 dernières MAJ) je n'arrive pas a le faire fonctionner (bien que ma page soit quasiment identique a l'exemple que le mec donnait) Gecko (et à ce que le mec disait IE aussi) rend alors tous les enfants transparents avec la même transparence. C'est assez génant, surtout si l'image de fond (celle qu'on voudrait voir à travers le <div>) est claire. Il faudrait pouvoir mettre l'opacité du texte contenu dans le div à 250% (comme ça combiné aux 40% du <div> ça ferait 100%) mais toute valeur >100 est considérée comme 100. Je n'ai pas trouvé d'autre moyen pour l'instant Ca ne marche pas du tout sur IE Mac (or pas mal de mes visiteurs sont dans ce cas), de plus j'ai pas la possibilité de tester moi-même (existe-t-il un logiciel/site permettant de faire une preview d'un site avec divers moteurs de rendu et sous plusieurs plates-formes ?) Je ne l'ai pas testé avec Opera, je ne sais pas comment il réagit. 3. Utiliser un background fixe Ici encore l'idée est simple et donne de très beaux résultats. Le principe est de créer 2 images de fond (sur la page au dessus, y'en a 4 : la normale, une grise, une marron et une blanche). On prend par exemple l'image de fond et la même fusionnée à 50% avec du blanc. On donne ensuite à notre <div> un fond utilisant cette image mais en fixant son positionnement par rapport à la page à l'aide d'un background-attachment: fixed;. Ici deux problèmes se posent : Ca ne marche pas dans IE car il ne supporte la "fixation" de background que pour l'élément <body>. J'imagine qu'opera la supporte, puisque ça ressemble à un standard. Ca ne marche que si le background en question est toujours à la même position par rapport au coin en haut à gauche de la page. Dans mon cas, ma page comporte un tableau de <div> qui fait 600px de large et qui est centré dans la page. Au milieu de ce tableau figure un <div> avec une barre de défilement et mon fameux background... Du coup suivant la taille de la fenêtre l'image que je veux voir par transparence n'est jamais au même endroit... 4. Background fixe en Javascript Malheureusement je crois que ça va être un passage obligé pour que ça marche sur toutes les plates formes. Je vais donc essayer de recréer le truc précédent mais en Javascript. Je sais pas si c'est faisable, j'ai pas trop le temps de regarder tout de suite, mais je sais déjà que ça va être long a rendre compatible avec tous les navigateurs... (edit: je peux peut etre essayer d'utiliser un iframe (je HAIS les frames) pour remplacer mon "div scrollant", ça résoudrait peut-être mon problème de background a position variable, mais ça me fait énormément ch*** d'utiliser un iframe, quoi...) En attendant si vous avez une idée, par pitié, n'hésitez pas... Lien vers le commentaire Partager sur d’autres sites More sharing options...
njoyard Posté(e) le 10 février 2005 Auteur Partager Posté(e) le 10 février 2005 Bon ok, pas "juste" un up... En fait j'ai bien avancé sur le problème. J'ai pas encore de solution mais ça avance... Ce que j'ai découvert: 1) les références javascript du WWW sont nazes pour la plupart 2) le background fixe CSS peut etre activé sous IE en ajoutant un "behavior: fichier.htc" mais XP SP2 bloque automatiquement le téléchargement des .htc, alors c'est sans issue... 3) le background PNG j'ai presque réussi, sauf que pour qu'il marche il faut que mes <div> aient des dimensions spécifiées explicitement... le problème c'est qu'autant leur largeur est fixe autant la hauteur dépendra du contenu (provenant de MySQL). Je peux peut etre essayer de faire un javascript qui inscrit la hauteur des divers DIV dans leur propriété style a la fin du chargement de la page... ou peut etre calculer en PHP la taille que prendra le texte pas évident vu que le texte contient des mises en forme html... Comme dit en (1) toutes les refs que j'ai trouvées sont nulles. du coup, j'ai pas trouvé comment faire ce que je veux faire. J'ai (en très résumé) : <div id="defil"> <div id="item1" class="transp"> blablabla </div><br> <div id="item2" class="transp"> blablabla </div><br> <div id="item3" class="transp"> blablabla </div><br> </div> et les styles: div#defil { padding: 0px; width: 508px; height: 400px; overflow: auto; background-image: url('une_superbe_image'); } div.transp { width:508px; bakground-image: url('png-semitransparent'); } et je veux faire une boucle (vu que mon nombre de div "transp" n'est pas fixe) qui me chope la hauteur de chaque div, malheureusement getElementById("item" + n).style.height ne marche pas (pas surprenant), ni sans le ".style"... donc si vous savez ce serait sympa... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Compte_supprime_49771 Posté(e) le 11 février 2005 Partager Posté(e) le 11 février 2005 et je veux faire une boucle (vu que mon nombre de div "transp" n'est pas fixe) qui me chope la hauteur de chaque div, malheureusement getElementById("item" + n).style.height ne marche pas (pas surprenant), ni sans le ".style"... donc si vous savez ce serait sympa... En fait, la propriété JavaScript 'style.height' ne renvoit la hauteur que si elle est spécifiée par la propriété CSS 'height'... Si tu veux obtenir la valeur actuelle de la hauteur, si celle-ci n'a pas été spécifiée en CSS, ça devra se baser sur un truc comme ça: <script type="text/javascript"> var e = document.getElementById('item' + n); var transpHeight = window.getComputedStyle(e, null).height; </script> Je me souviens plus bien, mais théoriquement, ça doit pas fonctionner sous IE5 et IE6... pour ça, faut utiliser un truc type 'currentStyle.height'... (Enfin j'avais testé ça sur un IE6 qui tournait sous Linux avec Wine... je sais pas trop s'il était vraiment très en forme ) En tous cas, merci pour le résumé des méthodes pour la transparence, dans ton premier post ^_^ J'avais pas remarqué qu'on pouvait utiliser "background-attachment: fixed;" pour ça, et ça rend plutôt très bien Pour la transparence, on peut aussi utiliser un gif de 2px de côté, avec un px sur deux de transparent, et l'autre, de la couleur que tu veux... et tu mets ça en background de ton div. Mais bon, le résultat est assez variable, selon les couleurs, et surtout, selon ce que tu as par-dessus... (le texte peut par exemple très mal rendre, selon sa taille et sa police...) Lien vers le commentaire Partager sur d’autres sites More sharing options...
njoyard Posté(e) le 11 février 2005 Auteur Partager Posté(e) le 11 février 2005 En fait, la propriété JavaScript 'style.height' ne renvoit la hauteur que si elle est spécifiée par la propriété CSS 'height'... oui je m'en doutais... Merci pour le getcomputedstyle et le currentstyle, je vais essayer... En tous cas, merci pour le résumé des méthodes pour la transparence, dans ton premier post ^_^ lol je vais peut etre le transformer en "topic unique: transparence en CSS" une fois que j'aurai trouvé les solutions.... Mais bon, le résultat est assez variable, selon les couleurs, et surtout, selon ce que tu as par-dessus... (le texte peut par exemple très mal rendre, selon sa taille et sa police...) oui, j'ai essayé le GIF de 2px mais ça donne vraiment moche dans mon cas. Cela dit je tiens a signaler que ça donne pas mal du tout lorsqu'il s'agit d'une couleur unie en fond... 'fin voila, merci pour le Javacript Yoxa, je vais m'y atteler... Lien vers le commentaire Partager sur d’autres sites More sharing options...
njoyard Posté(e) le 11 février 2005 Auteur Partager Posté(e) le 11 février 2005 tiens d'ailleurs yoxa puisque je te tiens (ou n'importe qui d'autre) connaissez vous une ref javascript DIGNE DE CE NOM ? a savoir qui parle d'autre chose que IE4/IE5/NN4 ? J'aimerais mieux savoir ou je mets les pieds en javascript, savoir quelles fonctions fonctionnent dans NN6, IE6, Ffx 1.0 opera 7 (ou 8?)... Enfin ce que j'aimerais c'est un tuto DHTML qui n'ait pas 1000 ans, et qui explique bien comment on peut faire cross-browserement ( ) des choses comme récupérer le ComputedStyle... parce que les sites javascript qu'on trouve aujourd'hui sont soit des collections de scripts faits n'importe comment et surtout sans explications, soit des références datant d'IE4 qui sont toutes des copies les unes des autres. Après avoir été copiée 100 fois, même si c'est des fichiers, il semble que le téléphone arabe a quand même fait son affaire (=> on y comprend rien) Lien vers le commentaire Partager sur d’autres sites More sharing options...
Compte_supprime_49771 Posté(e) le 11 février 2005 Partager Posté(e) le 11 février 2005 connaissez vous une ref javascript DIGNE DE CE NOM ? a savoir qui parle d'autre chose que IE4/IE5/NN4 ? J'aimerais mieux savoir ou je mets les pieds en javascript, savoir quelles fonctions fonctionnent dans NN6, IE6, Ffx 1.0 opera 7 (ou 8?)... JavaScript: The Definitive Guide (4th Edition), édité par O'Reilly 44$ (achète le en anglais, genre sur Amazon (soit depuis le site français, en import, soit depuis le site US, en livraison classique depuis les USA), si t'as pas de problème en anglais... c'est plus simple pour tous les termes techniques (enfin c'est un avis perso)). Il fait... 900 pages ^_^ Et il développe absolument tout, sur tout Niveau compatibilité, il développe aussi bien les IE4/IE5/NN4 & co, que le standards du W3C (ECMAScript), pour tous les navigateurs types Mozilla/Opera... Et puis c'est genre pour la partie CSS avec JavaScript, t'as limite un cours entier de CSS lol ^_^ (avec liste complète des propriétés, et points importants) J'ai pas vu grand chose encore en JavaScript, mais pour tout ce que j'ai pu faire, j'ai trouvé ce livre absolument parfait Et si j'ai envie de m'y mettre plus sérieusement, y'a tout ce qu'il faut pour tout maîtriser... ^_^ Enfin bon, c'est du O'Reilly quoi ^_^ Lien vers le commentaire Partager sur d’autres sites More sharing options...
Messages recommandés
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.