18041 sujets

Questions générales et questions de débutants

Utilisation et compatibilite des images PNG 24

Pages :
Je suis debutant en CSS et fonctionnait qu'avec des tableaux avant.
J'ai pris la resolution de passer du bon cote de la force et utiliser CSS et XHTML
mais voici mon probleme :

J'ai cherche sur les forum d'Alsa et pas trouve de reponse "generique" pour pouvoir utiliser des images PNG 24 transparentes en etant compatibles avec IE 6.

Je n'arrive pas et ne voit pas comment l'appliquer a mon cas.

Voici mon cas :

Le CSS affectant l'image (un logo de forme complexe en transparence sur le reste dessous) :

#logo {
	position:absolute;
	top:-45px; left:-30px;
	background: url(../img/logo.png) no-repeat ;
	width:566px; height:148px;
}

and now the HTML of it :

<a href="./" id="logo"></a>


Tous fonctionne bien avec les autres navigateurs mais sur IE 6 l'horreur !

Ce que j'ai trouve est complexe je trouve et je n'arrive pas a les mettres en place.
Pour les solutions Javascript on me parle d'implementation dans le DOM ou on me met du
code et ne sais pas ou le mettre, dans le CSS ou le HTML... ou de CSS pour IE 6 mais concretement je fais ca comment ? je l'ecris sur le meme CSS que le reste ou je cree un autre fichier CSS ? bref je patauge grave !

Hormis le fait que j'aimerais trouver une solution pour mes images en background de forme complexe PNG 24 puissent s'afficher comme sur Firefox ou Safari, ne serait-il pas interressant
de faire un ultime tuto des divers solutions pour utiliser des images PNG 24 transparente
de facon compatibles et tres didactique pour les neuneu webdesigner comme moi ? Smiley cligne
Modifié par imonalsacreations (19 Nov 2009 - 11:53)
Bonjour,

Pour IE6 le seul moyen simple est de substituer une image GIF via un commentaire conditionnel.

Mais avant de t'expliquer comment, je vais d'abbord corriger ton code (qui est une erreur). Primo, les images porteuses de contenu (pour faire simple sur lesquelles il y a du texte) doivent TOUJOURS se trouver dans le code HTML et être accompagnées d'un texte alternatif (alt="") reprenant la totalité du contenu qu'elles portent. Dans ton cas, si l'image venait à ne pas s'afficher (erreur de serveur, navigation sans images...) le lien qui est vide et ne s'afficherait plus.

Ton code HTML doit donc être : 
<a href="./" id="logo"><img src="../img/logo.png" alt="Texte du logo"></a>


Et pour les commentaires conditionnels (normalement ça devrait fonctionner) : 
<!--[if !IE ]><-->
      <img src="../img/logo.png" alt="Texte du logo">
<!--><! endif -->  
<!--[if IE 6]>
      <img src="../img/logo.gif" alt="Texte du logo">
<! endif -->


ps. : dans le cas d'un site servi en text/html (comme c'est le cas pour 99% des site et j'en suis sûre pour le tien) le XHTML n'est vraiment pas un choix logique. Le HTML 4.01 c'est très bien, tout aussi robuste et clean.
Merci Laurie-Anne pour ta reponse.
Mais il s'agit d'une image, pour etre precis, du logo du site, donc pas de contenu dessus, pas de texte donc je pensais que je pouvais la mettre avec mon CSS vu qu'elle bougera pas et fera partie
de la structure du site en fait.
Quant aux commentaires conditionnels, ca se place ou (je sais c'est une question idiote mais ce qui
va sans dire va mieux en le disant... Smiley cligne )
Et je n'ai pas l'image en .GIF pour la bonne raison c'est qu'elle ne peut pas etre faite proprement en
.GIF. Il y a de la decoupe autour en fait, voici l'image :
upload/25167-logo.png

Sinon est ce que mon idee d'un ultime tuto sur ce sujet, voir dossier tres didactique est une bonne idee ?
Laurie-Anne a écrit :
Euh... Pour toi "Location-alpes.com - été hivers" n'est pas du texte ?
Les commentaires conditionnels dans ton cas doivent être placée à l'endroit où tu veux faire apparaitre le logo dans le code HTML.
Pour le tuto, on a déjà un article au sujet d'un filtre JS (mais je n'aime pas cette technique).

+1 pour l'ensemble des remarques de Laurie-Anne Smiley jap
Avec un peu moins de réserves sur l'option javascript Smiley confused
J'aime particulièrement ce script : DD_belatedPNG
Il fait le travail qu'on lui demande et il le fait bien (simple d'utilisation, léger, gratuit...)

Ce qui n'empêche évidemment pas de tenir compte des judicieuses remarques de M'dame IE6 Smiley cligne
Laurie-Anne a écrit :
Euh... Pour toi "Location-alpes.com - été hivers" n'est pas du texte ?

Les commentaires conditionnels dans ton cas doivent être placée à l'endroit où tu veux faire apparaitre le logo dans le code HTML.

Pour le tuto, on a déjà un article au sujet d'un filtre JS (mais je n'aime pas cette technique).


Euh si evidement c'est tu texte mais il s'agit d'une image qui ne bougeras pas de la, c'est comme
ca que je l'entendais. Je pensais que ce qui etait structurel dans un site etait en background et
ce qui l'etait pas passait en img.

J'ai bien regarde effectivement ce qui se disait sur le sujet, et pas que sur Alsa et nul par meme dans les bouquins (j'ai passe 2 heure chez Eyrolles pour ca), nul part il n'y a un vrai sujet / tuto avec les differentes methodes et leurs avantages, expliquees pour les debutant ou autres quelque part. Sur les forums on a que des reponses a des cas precis de posts ou des tutos mal
explique sur une methode en particulier. Ca pourrait faire l'object d'un article d'ailleurs peut etre.
Salut,
Pour ma part j'utilise beaucoup les png pour mon projet actuel. Et j'ai fais le même constat que toi quand je passait sous iE6.

J'ai tout de même trouvé un solution, convertir mes png24 en png8 avec alpha, sans trop de perte de qualité. Cette méthode fonctionne bien sous iE6 quand il n'y pas de dégradé dans l'image, comme dans ton cas.

J'ai trouvé ça ici

En plus ça allège le poids de l'image!

Pour le alt sur l'image, En fait c'est que ton logo représente un peu le titre de ton site, en fait c'est carrément le nom du site en image. Imagine un peu, une personne arrive sur ton site, mais ne peux chargé le css pour une raison quelque conque. Ton logo n'apparaîtra pas dans le code du site et donc ne saura plus ou il est. Ton logo donne un peu un point de repère puisque qu'il contient des informations importante sur ton site.
Modifié par juliesunset (19 Nov 2009 - 17:23)
imonalsacreations a écrit :
Euh si evidement c'est tu texte mais il s'agit d'une image qui ne bougeras pas de la, c'est commeca que je l'entendais. Je pensais que ce qui etait structurel dans un site etait en background et ce qui l'etait pas passait en img.
Non, ton raisonnement n'est pas juste. En fait le HTML s'occupe du contenu et le CSS de la présentation, et uniquement de la présentation.
Smiley decu Smiley fache Smiley bawling

Je suis toujours en galere avec la transparence PNG sur IE 6.
J'ai essayé beaucoup de techniques, mais aucune ne marche.
J'ai notamment essayé celle-ci : http://www.twinhelix.com/css/iepngfix/demo/
Mais ca ne fonctionne pas.
J'ai donc essayé celle-ci : http://www.korben.info/les-png-transparents-sous-ie6-facile.html
Mais rien non plus.
Je comprend pas.

Qui peut regarder mon fichier et me dire ce qu'il se passe ou le modifier ?
Il est ici (zippé) : http://tr.im/GQ4l
Laurie-Anne a écrit :
En même temps, on te conseillait les commentaires conditionnels pour substituer une image en gif...


Desole je suis novice;
Qui me disait ca ? et kezako "les commentaires conditionnels" ?
Laurie-Anne a écrit :
Prends la peine de relire tout le sujet, merci.


Je n'avais pas repris tout le sujet... desolé.
Mais comme je le dis aussi dans mon poste, j'ai essayé divers techniques, dont certaines demandant des commentaires conditionnels. Mais sans succes aussi.

D'ou vient le probleme ?
Pourquoi elle ne pourrait pas être refaite en gif ? La seule chose qui pose problème avec les gifs, ce sont les dégradés progressifs, et en l'occurrence il n'y en a pas...


Essai vite fait (l'image ci-dessous est un gif transparent :

upload/4569-25167-logo.gif
mistike a écrit :
Pourquoi elle ne pourrait pas être refaite en gif ? La seule chose qui pose problème avec les gifs, ce sont les dégradés progressifs, et en l'occurrence il n'y en a pas...


Essai vite fait (l'image ci-dessous est un gif transparent :

upload/4569-25167-logo.gif


Meme si elle semble correcte sur un fond blanc, elle ne le sera pas sur le site en question, car il y des elements divers dessous (un background texture bois, du blanc, et des photos differentes sur chaque page). Le GIF transparent ca marche sur un fond uni car on peut y appliquer un cache pour se fondre correctement, tout comme j'ai essayé les PNG 8 transparents ca ne fonctionne pas pour mon cas. De plus sur le site j'ai besoin de resoudre se probleme car j'ai d'autres images transparentes avec des ombres donc la le GIF ne marchera pas.

J'ai dans mon lien fais un petit dossier avec divers types de PNG (par ordre : PNG 8 transparent, PNG 24 fireworks, PNG 24 photoshop, PNG 32 fireworks, le tout sur un applat vert).
C'est telechargable ici : http://tr.im/GQ4l
Bon ok.

J'ai déjà mis en place iepngfix sans trop de problèmes...

1) Dans le header, appel d'une feuille de style spécifique pour IE6
2) Dans cette feuille de style, ceci :


/* PNG Fix */
img, div, a, li li a:hover, li li a { behavior: url("/iepngfix.htc")


3) En racine du site, le fichier iepngfix.htc

La seule chose à laquelle il faut faire attention, c'est le fond des images (le "matte" dans photoshop), si possible lui mettre une couleur proche du fond de la page, de façon à éviter ce gris pas beau, le temps que le script fasse effet au chargement de la page.
mistike a écrit :
Bon ok.

J'ai déjà mis en place iepngfix sans trop de problèmes...

1) Dans le header, appel d'une feuille de style spécifique pour IE6
2) Dans cette feuille de style, ceci :


/* PNG Fix */
img, div, a, li li a:hover, li li a { behavior: url("/iepngfix.htc")


3) En racine du site, le fichier iepngfix.htc

La seule chose à laquelle il faut faire attention, c'est le fond des images (le "matte" dans photoshop), si possible lui mettre une couleur proche du fond de la page, de façon à éviter ce gris pas beau, le temps que le script fasse effet au chargement de la page.



Merci je vais essayer ca, mais j'avais tenté deja avec iepngfix.htc... Je retente.
imonalsacreations a écrit :
Meme si elle semble correcte sur un fond blanc, elle ne le sera pas sur le site en question, car il y des elements divers dessous (un background texture bois, du blanc, et des photos differentes sur chaque page). Le GIF transparent ca marche sur un fond uni car on peut y appliquer un cache pour se fondre correctement, tout comme j'ai essayé les PNG 8 transparents ca ne fonctionne pas pour mon cas. De plus sur le site j'ai besoin de resoudre se probleme car j'ai d'autres images transparentes avec des ombres donc la le GIF ne marchera pas.


Alors... Pour faire simple : L'image en gif de moins bonne qualité de transparence n'est utilisée que pour IE6 ; donc ce n'est pas grave s'il y a une petite bordure blanche, ou si le découpage n'est pas aussi fluide.

La subsitution d'image est la technique la plus propre et la plus robuste qui existe. Pour t'en convaicre, visite le forum avec IE6, tu verra que la dégradation des icones du menu principal n'est pas gênante.
Pages :
Sujet clos
Aller à