28173 sujets

CSS et mise en forme, CSS3

Pages :
J'ai un script (behaviour.htc) qui permet de gérer la transparence des PNG sous IE, et j'aimerais savoir si c'est possible de gérer ça directement par CSS.
Je voudrais aussi savoir si c'est également possible de rendre transparent une image mise en background (attribut 'background-image'), et si oui comment. Je voudrais faire ça car j'ai également une couleur de fond en plus du background.
Modifié par Trunks_ (09 Dec 2005 - 16:45)
Bonsoir, je me pose exactement la même question, et j'ai peur qu'il n'y ai aucune solution...
Si quelqu'un pouvais me contredire ca m'éviterais peut etre de devoir revoir entièrement un site sur lequel j'ai déjà passé beaucoup trop de temps Smiley ohwell

Edit: A défaut si quelqu'un avais une methode pas trop lourdingue pour charger une image sous IE (version inférieure à 7) et une autre pour les autres navigateurs ce me rendrais déjà un grand service
Modifié par Resh (08 Dec 2005 - 18:44)
Ouais mais l'interet du png-24 c'est la transparence partielle, en l'occurence j'ai un leger effet d'ombrage sur l'arrière plan de ma page (mais qui à un très fort impact graphique), et une trame derrière, (le logo d'une entreprise) et vu que ma page est centrée, suivant la taille de la fenetre, elle bouge par rapport à la trame, donc je ne vois pas comment je peut gerer cet ombrage autrement qu'avec la transparence Smiley ohwell
Bref, je suis dans la mouise, et si quelqu'un pouvait m'en sortir, je lui en serait extremement reconnaissant
Modifié par Resh (08 Dec 2005 - 22:29)
Je suis d'accord avec toi, je suis aussi pour le PNG. Toutefois, j'ai un script pour toi les faire fonctionner les images PNG :

HTML :

<img style="behavior:url('script/pngbehavior.htc');" ... />


pngbehaviour.htc :
<public:component lightWeight="true">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
 
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
				navigator.platform == "Win32";
// supported = false;				

var realSrc;
var blankSrc = "images/blank.gif";

if(supported)
	{
	fixImage()
	}
else
	{
//	alert(element.src.substring(element.src.length - 3,element.src.length));
	if (element.src.substring(element.src.length - 3,element.src.length) == "png")
		element.src = element.src.substring(0, element.src.length - 4) + '.gif'
	}

function propertyChanged() {
	if (!supported) return;
	
	var pName = event.propertyName;
	if (pName != "src") return;
	// if not set to blank
	if (!new RegExp(blankSrc).test(src))
		fixImage();
};

function fixImage() {
	// get src
	var src = element.src;

	// check for real change
	if (src == realSrc && /\.png$/i.test(src)) {
		element.src = blankSrc;
		return;
	}

	if ( ! new RegExp(blankSrc).test(src)) {
		// backup old src
		realSrc = src;
	}
	
	// test for png
	if (/\.png$/i.test(realSrc)) {
		// set blank image
		element.src = blankSrc;
		// set filter
		element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
					"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
	}
	else {
		// remove filter
		element.runtimeStyle.filter = "";
	}
}

</script>
</public:component>


Mais ce n'est pas géré par le CSS, ce que je souhaitais.
De plus, je cherchais à rendre une partie transparente d'un background et le backgroud étant défini dans le CSS, je n'ai pas trouvé de solution pour ce cas de figure. Smiley fache
@Trunks : tu as essayé en mettant ta propriété de background directement dans le style de ta div ?
Perso j'utilise un autre script dont parlait Stephan mais il a les mêmes limites. Normal. Donc j'ai renoncé à certains effets pour IE en lui donnant une css spéciale avec des fonds opaques. Et c'est tout aussi bien comme ça.
Effectivement je suis c**. Ce n'est pas parce-que dreamweaver ne reconnait pas l'attribut behaviour que ça ne marche pas, et de plus quand j'ai eu ce script je ne connaissais pas bien le CSS. Smiley ravi
Bon, ça y est je l'ai incorporé dans le CSS et ça marche. A dire que j'étais si près du but ...
Salut,

J'utilise une solution CSS qui a aussi été discuté ici il me semble.

Avec des commentaires conditionnels je donne à IE > 7 une feuille spéciale qui met en œuvre le filtre AlphaImageLoader. Le seul inconvénient, c'est d'avoir à utiliser des background image au lieu de balise img, mais cela donne un résultat impeccable.
En gros, dans la feuille normale, on donne un png en background image pour tous les navigateurs, et dans la feuille spéciale IE on remet le background à 0 et on applique le AlphaImageLoader avec le même png.

voir ici en action sur les boîtes de droite.

Je cherche à améliorer la technique en utilisant des object dont la source serait vide pour pouvoir les utiliser comme des img au lieu de mettre les background sur les p, h ou div.
Je crois que ce post a été très utile est que ça répond à une question qui revient fréquemment. Je pense que ça serait bien de faire un tutoriel dessus et ainsi éviter à pas mal de personnes de galérer sur la transparence des PNG sous IE. Qu'en pensez-vous?
Modifié par Trunks_ (09 Dec 2005 - 16:46)
Ouah, vraiment interressant tout ca, j'ai réussi à importer une feuille de style alternative pour ie, je ne connaissais même pas encore ce système, et la transparence à l'air de marcher, mais y'a encore des gros problèmes, notamment des images qui n'apparaissent pas; voir ici (c'est en travaux alors attention ou vous mettez les pieds Smiley cligne )
Ca doit être à cause de cette propriété HasLayout, mais j'avoue que c'est très obscur pour moi, je ne la voit nulle part dans le code de la page, et le lien n'est pas très explicite, si on pouvait m'éclairer la dessus je vous jure qu'après je vous lache Smiley ravi

Edit: Je cherche je cherche, mais plus je comprends cette histoire de layout, moins je comprends mes bugs...
Modifié par Resh (09 Dec 2005 - 18:11)
Trunks_ a écrit :
Je crois que ce post a été très utile est que ça répond à une question qui revient fréquemment. Je pense que ça serait bien de faire un tutoriel dessus et ainsi éviter à pas mal de personnes de galérer sur la transparence des PNG sous IE. Qu'en pensez-vous?

Que du bien. Il y a encore à ajouter à tout ça la méthode de remplacement de l'image par php. Je maîtrise à peine le concept. Un tutoriel en français et qui reprendrait les différents cas serait donc un bel effort de synthèse.
Merci, mais depuis je suis déjà tombé sur ce site, le probmlème c'est que plus je comprends comment ca marche, moins je comprends mes bugs...
mes "gellules" sont en float: left, donc normalement elle possèdent un layout, mais elle ne s'affiche pas, et les quelques hacks que jai essayé au cas où n'ont rien donnés... Et puis j'ai toujours comme un gros bloc transparent par dessus tout mon site qui empeche les :hover ou la selection du texte... J'ai essayé de joué sur le z-index mais ca ne marche pas...
globy a écrit :

Salut
Ça buggue sous IE 6 pc pour 3 boîtes sur 4.


Euh tu peux me dire quel IE et quel OS?, parce que sur mon IE6 xp sp1 et sp2, IE6 2k, IE6 win98 tout fonctionne parfaitement.

Et même sous IE5.5 que j'ai testé sous 98.


Je viens de tester IE5.5 normal et SP2 sous XP SP1, et je viens de voir que l'astuce ne fonctionne qu'a partir de IE5.5SP2 et non IE5.5. Smiley edit Modifié par matgorb (10 Dec 2005 - 13:56)
Smiley confus
Personne n'aurait d'idée pour mon problème d'empilement? Ou même des remarques quelconques sur mon site? (sauf la gallerie qui n'est pas finie)
Please help! mon avenir professionel en dépends! Smiley cry Smiley lol
Pages :