28220 sujets

CSS et mise en forme, CSS3

4 png + ie6

Bonjour à tous.
Je sais que mon sujet n'est pas nouveau mais après avoir chercher des éléments de réponse sur d'anciens posts, je me retourne vers vous.
J'ai réalisé 4 icones que je voudrais réutilisé en tant qu'images en PNG et bien sûr sous ie6 un cadre gris apparait. J'essaie de réutiliser le code suivant 
#global {
	height: 100%;
	position: static;
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://develop.web.free.fr/site_dread/site_1/separateur_colonne.png", sizingMethod="scale");
	}
, code présent sur l'un des tutos d'alsacréations.
Mes images sont aussi des liens donc je crois qu'il est nécessaire d'utiliser aussi le bout de code suivant 
a {
	position: relative;
	}
et de placer le tout sur une fiche de style css.
Néanmoins, il convient que j'adapte ce code à mes propres besoins et c'est là que l'affaire se corse.
Je vous met le code de ma page php où sont présentes mes 4 images
<a href="contact.php?num_camping=<?php echo $row_rs_annonceurcamping['id_camping']; ?>" title="Ecrire au contact"><?php if($row_rs_annonceurcamping['url_contact']==""){ echo "";}else{ echo '<img src="Images/icones/icone_contact.png" alt="Ecrire au contact" class="image"/>';}?></a>
		<a href="#" title="Aller sur le site"><?php if($row_rs_annonceurcamping['url_site']==""){ echo "";}else{ echo '<img src="Images/icones/icone_site.png" alt="Aller sur le site" class="image"/>';}?></a>
		<a href="#" title="Voir sur un plan"><?php if($row_rs_annonceurcamping['url_plan']==""){ echo "";}else{ echo '<img src="Images/icones/icone_plan.png" alt="Voir sur un plan" class="image"/>';}?></a>
		<a href="http://develop.web.free.fr/video_flash.php?num_camping=<?php echo $row_rs_annonceurcamping['id_camping']; ?>"><?php if($row_rs_annonceurcamping['url_video']==""){ echo "";}else{ echo '<img src="Images/icones/icone_video.png" alt="Voir la video" class="image"/>';}?></a>

Ce code est englobé dans un div "texte4" lui-même englobé dans un div "global".
J'ai utilisé une classe "image" afin que je puisse enlever le cadre qui se mettait autour de mes images-liens par le code css suivant 
.image {
	border: 0px;
	}

Voilà pour la structure. Pour en revenir à mon problème, j'ai du mal à définir sur quel élément appliquer le code permettant de rendre les png transparentes et si je dois répéter l'action 4 fois pour mes 4 images. Jusqu'ici toutes mes tentatives ont échoué. Alors merci pour tout coup de pouce!!!
Bonjour,

Pouvez vous donner un lien vers votre page web avec les PNG en question ? (au pire les poster ici, mais le lien est préférable).
Il n'est pas nécessaire d'utiliser ce type de PNG (ici le canal alpha n'a qu'une fonction limitée, voire inutile Smiley cligne ). Les solutions propres au PNG :

Solution 1 : Convertissez les simplement en TrueColor, augmentez légèrement le padding gauche du cadre, et insérez les tels quels, en supprimant tous les filtres. Les PNG seront moins lourds, et non transparents.

Solution 2 : Convertir les PNG en Paletted ; cela diminue très légèrement la qualité de l'image, de manière presque insignifiante, et assure une transparence restituable sous Internet Explorer 6.0, en supprimant tous les filtres. Les PNG seront deux fois moins lourds, et transparents.

(edit) Solution 3 : Rajouter l'attribut bKGD avec pour valeur 255 dans chaque canal (restitue un arrière plan blanc).
Modifié par original.defeat (05 Feb 2007 - 11:34)
Sujet clos
Aller à