[Résolu->Alsacreations Rules] Problème transparence PNG géré par CS

Bonjour tout le monde, alors voilà c'est simple j'utilise un PNG pour le background de mon container.

Je gere la transparence avec le code css trouvé ici http://www.wikistuce.info/doku.php/css/png_transparent_pour_les_backgrounds

ALors ca marche bien sauf que comme précisé en bas du lien ci dessus mes liens ne marchent plus.

J'aimerais savoir comment palier à ce problème en ayant la solution la plus interroperable, toute doc ou explication sera la bienvenue

Site de test (projet en cours mais pas officiel du tout)
http://qa.nikolours.com/qasque.html

Merci d'avanceeeeeeeeeeeeeeeeeeeee
Modifié par Nikolours (28 Jan 2007 - 18:52)

bonjour/bonsoir.

le probleme vient du fait que utilise le filtre 'special "IE" sur le conteneur plaçé en position:relative ; dont les lien sont "enfants" . tu as le droit au bug d'IE (idem si le conteneur est en absolute).

solution la plus simple :
Laisser le conteneur principal en static et positionner (pied) les liens vers les validateurs d'une autre façon ou ailleurs dans le flux de ta page.

Utile au moment du "develloppement" eventuellement , ils n'ont , par la suite que peut d'interêt si ce n'est "flatté" l'ego du devellopeur ...

Cordialement

GC

Salut cyrillus et merci d'avoir pris le temps.

Le footer y faut que je le garde, y aura des infos legales pour mon projet tkt c'est pas pour mon ego (j'ai bien rigolé 2 min grace à toi en cette heure tardive).

Je comprend bien le bug de la facon dont tu me l'explique now (je suis toujours épaté par les gens qui arrive à me faire comprendre un truc à 2h du mat lol)

Le pb c'est que à ma connaissance j'ai pas d'autre solution pour avoir le footer en bas de page et la repetition de mon back sur le conteneur. (comme expliqué la et encore merci a ghost qui m'avait bien aidé http://forum.alsacreations.com/topic.php?fid=4&tid=20830&s=noob )

Bref j'ai du mal a voir comment je peux garder le static tout en ayant un footer en bas d'une page qui me prend 100% en hauteur. SI t'as une piste ou mieux une solution, je te baiserai les pieds monseigneur

Plz snifouille, je suis dans le caca je trouve pas de solution

Wow, c'est un peu le bazar...

#container {
	position: relative;	/* Pour que contenair serve de référence au positionnement absolute su footer */
	margin: 0 auto 0 auto;
	width: 850px;
background: url(/webdesign/bordure.png) repeat-y; 
background-image:url(no-image);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/webdesign/bordure.png');
	
	*/height: 100%; /* Pour IE6 qui ne connait pas min-height */
}

html>body #container { /* Pour les autres navigateurs qui intègrent min-height */
	min-height: 100%;
} 

- Pas besoin de cacher le min-height aux navigateurs qui ne le comprennent pas, vu qu'ils se contenteront de l'ignorer.
- Le code spécifique à Internet Explorer (et en particulier à Internet Explorer 6) devrait lui être adressé via des commentaires conditionnels (la FAQ du forum en parle).
- Le background-image:url(no-image); empêche l'affichage de l'image de fond avec les navigateurs autres qu'Internet Explorer (vu que lui seul comprend la propriété filter...).

Salut Florent (c'est marrant j'étais en train de lire ton post sur l'accessibilités d'un menu en image)

Je ne comprend pas ce que tu veux me dire avec le min-height (noob inside) si tu peux m'eclairer

Je viens de lire la faq sur les commentaires conditionnels effectivement c'est interessant mais je ne pense pas que ca va résoudre mon problème présentement (le Filter sur le png en background sur mon div conteneur qui me bloque mes link)

Le no image je l'ai mis pour isoler le problème de IE mais sinon je mettrais juste avant

background: url(/webdesign/bordure.png) repeat-y !important;

J'ai beau chercher je ne trouve pas de solution à mon problème, car si je met mon png en img je pourrais utiliser le code js pour la transparence mais je ne pourrais pas le repeter verticalement et je ne sais pas comment faire autrement pour avoir mon footer en bas de page.

Merci pour ton aide et tes conseils

bonjour,

pour contrecarré l'effet du position:relative; sur le conteneur et qui a pour effet de repassé en avant plan les effet du filtre d'IE (qui est comme un flash , une surcouche logiciel a la page web proprement dites) tu peut essayer un position:absolute pour les liens et donner un z-index:1; au conteneur et un z-index:2; aux liens.


Quand au pied de page , voici une bricole ou le pied est relégué aprés le conteneur (mis en 100% de hauteur minimale) et remonté avec une marge negative , qui ne fait pas usage de positionnement relatif ou absolu.

http://gcyrillus.free.fr/trucs_css/pied-en-bas-V2.html

Une alternative , comme une autre .

GC
Modifié par gcyrillus (25 Jan 2007 - 13:20)

Bonjour Nikolours

Sinon tu peux utiliser une transparence simple (PNG ou GIF) pour les versions antérieures à IE 7.

C'est certes un peu moins joli, mais ça peut le faire quand même: http://www.csszengarden.com/?cssfile=187/187.css


Modifié par Alan (25 Jan 2007 - 13:35)

Nikolours a écrit :
Je ne comprend pas ce que tu veux me dire avec le min-height (noob inside) si tu peux m'eclairer

L'utilisation de min-height est tout à fait pertinente, mais il est inutile d'utiliser un hack CSS pour le cacher à IE6 et IE7 (surtout que l'on voudrait qu'il soit visible par IE7... ). IE6 ne comprend pas min-height, et se contentera de l'ignorer s'il le trouve.

On mettra donc le min-height: 100%; avec les autres propriétés pour #container, pas à part.

Un autre hack CSS que tu te proposes d'utiliser, c'est celui du !important (là encore, non compris par IE6). Je déconseille fortement ce type de manoeuvre.

Pour adresser des styles particuliers à Internet Explorer ou même à certaines versions de ce navigateur on utilisera les commentaires conditionnels. C'est de loin la meilleure solution (c'est à dire : la plus fiable et la plus pérenne).

gcyrillus a écrit :
bonjour,

pour contrecarré l'effet du position:relative; sur le conteneur et qui a pour effet de repassé en avant plan les effet du filtre d'IE (qui est comme un flash , une surcouche logiciel a la page web proprement dites) tu peut essayer un position:absolute pour les liens et donner un z-index:1; au conteneur et un z-index:2; aux liens.

Pas con je vais tester ca des que je rentre du taf, je viens de lire les attributs de z-index ca m'a l'air interessant mais il me semble avoir entendu/lu qu'il n'était pas reconnus par tout les naviguateur je me trompe?

gcyrillus a écrit :

Quand au pied de page , voici une bricole ou le pied est relégué aprés le conteneur (mis en 100% de hauteur minimale) et remonté avec une marge negative , qui ne fait pas usage de positionnement relatif ou absolu.

http://gcyrillus.free.fr/trucs_css/pied-en-bas-V2.html

Une alternative , comme une autre .

GC

Pas bete non plus lol (decidement je me sens con ) le problème c'est que je ne vais pas pouvoir repeter ma bordure.png (background-image de mon conteneur) jusqu'en bas de page non? (cette image n'est visible que sous IE puisque j'ai oublié les attributs css pour les autres nav à l'heure ou j'ecris)

Alan a écrit :
Bonjour Nikolours

Sinon tu peux utiliser une transparence simple (PNG ou GIF) pour les versions antérieures à IE 7.

C'est certes un peu moins joli, mais ça peut le faire quand même: http://www.csszengarden.com/?cssfile=187/187.css

Tiens c'est marrant c'est le site qui m'a motivé pour réaliser mon projet, la forme etc...

J'ai pensé et essayer le GIF mais je trouve ca laid, je n'ai pas le petit effet d'ombre sombre sur le motif rose, je chipote un peu peut etre lol.

En tout cas merci du conseil c'est vrai que si on peut se permettre de mettre du gif c'est bien plus simplee

Florent V. a écrit :

L'utilisation de min-height est tout à fait pertinente, mais il est inutile d'utiliser un hack CSS pour le cacher à IE6 et IE7 (surtout que l'on voudrait qu'il soit visible par IE7... ). IE6 ne comprend pas min-height, et se contentera de l'ignorer s'il le trouve.

On mettra donc le min-height: 100%; avec les autres propriétés pour #container, pas à part.

Dacodac je prend ca en considération et réadapter mon css

Florent V. a écrit :

Un autre hack CSS que tu te proposes d'utiliser, c'est celui du !important (là encore, non compris par IE6). Je déconseille fortement ce type de manoeuvre.

Pour adresser des styles particuliers à Internet Explorer ou même à certaines versions de ce navigateur on utilisera les commentaires conditionnels. C'est de loin la meilleure solution (c'est à dire : la plus fiable et la plus pérenne).

Ok, en fait j'avais vu le !important sur la plupart des templates zengarden je pensais donc que c'était une solution pertinente


Merci à vous c'est trés sympa de m'aider, si j'arrive à resoudre mon soucis je manquerais pas de mettre un ti link vers vos sites et vous notifier dans le code source pour les corrections apportées. (c'est un assez gros projet ca peut vous faire un peu de pub, c'est pas un appat pour que vous m'aidiez hein je pense que c'est la moindre des choses)

Héhé trop fort le mec mais bon pour le moment j'arrive pas à mes fins lol

Bon les gars je suis dans le caca serieux

C'est le futur site d'un groupe de zik assez connu bientot en concert en france et je le fais benevolement. AU debut tout allait bien, j'avais un background de conteneur en gif, mais depuis que la graphiste le veut en PNG j'arrive a plus rien.

<Modération par Florent V. : pas de proposition de travail au noir (voir message ci-dessous. />

Alors voilà les tests que j'ai fait

J'ai essayé la technique du z-index, ca marche pas (ou je l'ai mal appliqué)
cf ici http://qa.nikolours.com/zqasque.html
Avec FF ca marche mais ca me decale des trucs au niveau des liens.
Avec IE6 et 7 ca marche au niveau esthétique mais les liens ne sont toujours pas cliquable...

Sinon je rencontre un autre soucis, quand je reduis ma fenettre (genre 800*600) mon footer vient se plaquer en plein milieu de la plage et en bas de la fenetre de mon nav et non pas en fin de page... (avec ie et ff)

J'ai essayé d'appliquer http://gcyrillus.free.fr/trucs_css/placer-un-element-au-bas-de-son-conteneur-et-pas-le-bas-de-la-page-.html

Test ici http://qa.nikolours.com/qasque.html


J'imploreeee votre pitiée lol plz plz plz
Modifié par Florent V. (25 Jan 2007 - 23:40)

Nikolours a écrit :
C'est le futur site d'un groupe de zik assez connu bientot en concert en france et je le fais benevolement. AU debut tout allait bien, j'avais un background de conteneur en gif, mais depuis que la graphiste le veut en PNG j'arrive a plus rien.

Solution simple et pas prise de tête :
- image de fond en PNG-24 (l'image actuelle donc) pour les navigateurs récents : Firefox, Opera, Safari, Konqueror, Internet Explorer 7 ;
- image de fond en GIF ou en PNG-8 (l'ancienne image, donc) pour Internet Explorer 6 et inférieurs.

Ça s'appelle s'adapter aux contraintes techniques et exploiter au mieux les possibilités de chaque navigateur.
L'utilisation des filtres propriétaires d'IE pour obtenir la transparence PNG dans IE6 a des effets de bord qui font que cette solution ne vaut pas forcément le coup d'être utilisée dans certains cas. Du coup, pour IE6, on se contentera de la version « bien mais perfectible ». L'important, après tout, c'est aussi et surtout l'accès à l'information !

Techniquement, pour adresser des styles à IE6 et inférieurs (ou aux versions strictement inférieures à la 7, suivant comment on le prend), on utilisera les commentaires conditionnels. Rappel : la FAQ en parle.

Nikolours a écrit :
Je saurais rétribuer les contributeurs via citation dans le site ou rémunération (legere car je fais ca benevolement)

C'est sympa de ta part mais ce genre de propositions, pour pleines de bonnes intentions qu'elle puissent être, est illégal. Toute forme de rémunération hors du cadre légal d'un contrat d'embauche, d'une prestation facturée, etc., représente un travail au noir, donc illégal.

C'est ce à quoi je pensais Florent merci beaucoup de ton aide je pense que je vais faire ce que tu dis, je vais potasser la faq je m'en sortirai.

Je viens de faire un test avec juste un gif, c'est pas si moche non plus
http://qa.nikolours.com/qaclean.html

En revanche j'ai toujours ce pb de footer qui est bien placé si j'affiche ma page en plein ecran (1280*1024) mais je la reduit (1024*768) mon footer vient en bas du naviguateur (ff) ce qui correspond a mon milieu de page et si je defile c'est tout moche...

Toujours sur http://qa.nikolours.com/qaclean.html (version sur laquelle je bosse now)

JE met ce post en reglé et j'en ouvre un autre à ce sujet?

Pour la rétrib, je peux aux moins te citer dans le code source du site et foutre un link vers ton site qq part si tu le veux.
Pour l'argent dsl je savais pas... ENfin c'est logique aussi...

MERCI MERCI MERCIIIII A toi et toute l'equipe d'alsa car mm si je vous fais chier sur le forum pour mes ti pb, j'ai eviter de vous poser bcp de question en lisant vos publications

matmat a écrit :
Est ce que tu ne pourrais pas mettre tes png uniquement sur les bords? c'est un peu pénible parcqu'il faut que tu mettes une ou deux div en plus, mais bon si ça peut te tirer d'affaire. A ton div principal, tu en rajoute une a droite et une a gauche et tu laisse la zone du milieu avec un fond noir avec deux png au lieu d'un, comme ça tu n'as pas d'interférence avec les liens

OUi mat c'est une possibilité à laquelle j'ai pensé mais je ne l'ai pas fait car ca nécessite il me semble:

-de caler le background au pixel pres
- comment qu'on fait pour les repeter pour prendre 100% de la page...

Mais si t'as des docs qui parle de ca je suis preneur

Une question: est ce que le bug du png ce produit également si l'image de ton background ne couvre pas la zone de ta div? C'est a dire est ce que les liens marche si tu as par exemple ton background avec le filter pour ie qui ne fasse que 30px d'un coté en repeat-y?

oups pardon mauvaise piste vue que filter ne marche pas avec repeat-y Modifié par matmat (26 Jan 2007 - 00:38)[/edit]

oups filter ne marche pas avec repeat-y, oublie la question

<div class="content">
  <div class="back_left"></div>
  <div class="back_right"></div>
  <div class="black">
     contenu
  </div>
</div>

L'idée c'est un truc comme ça, effectivement il faut voir comment les deux div peuvent s'ettendre sur tout la longueur
Modifié par matmat (26 Jan 2007 - 00:43)

une question cette fois vrai, est ce que tu pense que ta page aurat une dimension de plus de 1000px de haut?
Modifié par matmat (26 Jan 2007 - 00:45)