28216 sujets

CSS et mise en forme, CSS3

Voila, on imaginera dans mon exemple que l’image dont il sera question est un anneau avec une transparence externe et interne.

Comme la plupart des gens le savent, la couche Alpha sous IE est très mal gérée (couleur supérieur à 8bits) sans recourir à un collage made in Microsoft pour permettre à des clients IE de voir correctement les transparences.
Mais c'est vraiment très pénible à metre en place quand il s’agit d’une image appliqué à un background.
Je suis donc contraint de rajouter un <div> avec une class dans mon code (pour y mettre un background que seul IE lira).

Sous Firefox/Opera, le code suivant fonctionne très bien :


<div class="les_news">
	<p>Je pose mon texte ici</p>
	</div>


Dans ma CSS :

.les_news {
	position : absolute;
	width : 400px;
	height : 300px;
	left : 50%;
	margin-left : -200px;
	background : url('anneau.png');
	}


DONC pour éviter d’avoir un fond bleu sous IE (autour et à l'intérieur de mon image en background), j’ai donc du chercher une méthode, qui fonctionne, mais certes très lourde.

En HTML :

<div class="les_news_png_ie"></div>
<div class="les_news">
	<p>Je pose mon texte ici</p>
	</div>


Dans ma CSS :

.les_news {
	position : absolute;
	width : 400px;
	height : 300px;
	left : 50%;
	margin-left : -200px;
	}
			
.les_news_png_ie {
	position : absolute;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='anneau.png');
	width : 400px;
	height : 300px;
	left : 50%;
	margin-left : -200px;
	}
			
	.les_news[class] {
	background : url('anneau.png');
	}

autour de class il y a des crochets (ALT Gr + 5 et 8)

Je ne suis pas expert en la matière, et je cherche une méthode moins laborieuse à mettre en œuvre que de recourir à des bidouilles.

Avez-vous une bien meilleur technique que la mienne ?
je m'arrache les cheveux à trouver plus simple à faire mais je n'y arrive pas.

Je vous en remercie d’avance !
Modifié par Erad (04 Nov 2005 - 02:34)
Salut,

Pour les png sous ie, j'avais trouvé un site qui proposait un js pour les avant-plans et un pour les arrière-plans (sur le même principe).