28173 sujets

CSS et mise en forme, CSS3

Problème fond transparent CSS [Résolu]

Bonjour,

j'aimerais appliquer la règle sur les fonds transparent PNG pour ie6 avec la fonction filter.

Voici le code:

<style type="text/css">

html, body {
	height: 100%;
	margin: 0;
	background: #3D9CFA url(gfx/fond_adapte_pour_tous_1024.jpg) repeat-x fixed bottom center;
	margin-top:0px;
	margin-bottom:0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
	}
div#conteneur {
	position: relative;
	background: url(gfx/fond.png);
	margin: 0 auto;
	width: 781px;
	height: 100%
}
</style>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<style type="text/css">
#conteneur {
height: 1%; /* HasLayout */
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/gfx/fond.png", sizingMethod="scale");
}
</style>
<![endif]-->


et dans ma page:


<div id="conteneur"> 
  <p>bla la</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>vla </p>
  <p>&nbsp;</p>
  <p>vla</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>vla</p>
  <p>bla  </p>
</div>



Sous ie6 comme on peut le voir cela ne fonctionne pas j'ai beau retourné l'affaire dans tous les sens je ne trouve pas Smiley sweatdrop

voir sur http://liguelda.free.fr/test/test_fond.php

Quelqu'un aurait-il une idée?

Merci Smiley smile
Modifié par chromatia (15 Jan 2008 - 11:55)
Salut,


#conteneur {

height: 1%; /* HasLayout */

background: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader([b]src="/gfx/fond.png"[/b], sizingMethod="scale");

}

pouruqoi mettre un chemin absolu ?
le chemin qu'on doit utiliser dans la propriété filter est un chemin relatif a partir du fichier test_fond.php et non a partir de la ou est la feuille de style css (comme c'est le cas pour les background)

remplace

#conteneur {

height: 1%; /* HasLayout */

background: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader([b]src="/gfx/fond.png"[/b], sizingMethod="scale");

}

par

#conteneur {

height: 1%; /* HasLayout */

background: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader([b]src="gfx/fond.png"[/b], sizingMethod="scale");

}

Modifié par hakkou (13 Jan 2008 - 17:01)
Bonsoir cromatia,

Le sujet a été traité à de nombreuses reprises sur le forum, la FAQ pourrait également t'aider...
Ce sujet posté il y a deux jours aurait également pu t'inspirer Smiley cligne

Une question, à quoi te sert ce script...

<script defer type="text/javascript" src="pngfix.js"></script>

...Si tu utilises également le filtre de Microsoft ? Cela ne fait pas un peu double-emploi ?

Bref, les deux méthodes doivent fonctionner mais il ne doit pas être indispensable de le faire en même temps Smiley cligne

Pour le filtre il doit suffire d'empêcher IE6 d'accéder aux propriétés que tu définis dans ta feuille de style pour ton conteneur :
[#blue]html>body[/#] #conteneur {
	position: relative;
	background: url(fond.png);
	margin: 0 auto;
	width: 781px;
	height: 100%;
	}


Et pour le commentaire conditionnel :

<!--[if lt IE 7.]>
<style type="text/css">
#conteneur {
height: 100%; /* HasLayout */
width:781px;
margin: 0 auto;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fond.png", sizingMethod="scale");
}
</style>
<![ endif]-->

(sans espace après le crochet du endif)
En tout cas, cela fonctionne chez moi (sans le js) Smiley cligne
puré chuis content ça fonctionne!

pfiou merci.

Oui j'avais vu pour les autres sujet mais j'ai passé tellement de temps à remanier que je me suis perdu...
Au départ j'étais partie sur la méthode de opacity 0.5 avec une destructuration du css pour y arriver c'était l'horreur!

En tout cas ça fonctionne je dis merci Smiley smile
Oui... Smiley lol

C'est un bug assez "connu" (texte non sélectionnable, lien non cliquable,...) la FAQ en parle, même si la solution proposée ne résoud pas à tous les coups ce type de problème Smiley decu

Tu peux essayé de mettre ton conteneur en position static et le reste ( les liens, formulaire, code, etc...) en position relative :

html>body #conteneur {
	position:static;
	background: url(fond.png);
	margin: 0 auto;
	width: 781px;
	height: 100%;
	z-index:100;
	}
a,pre,form {position:relative;}


J'accepte les petites coupures Smiley lol
daco dac je vais voir avec ce que tu m'as passé c'est cool.
Par contre pour le fait qu'il reste bloqué sur le "load" de certaine image png ça pourrait être dû à quoi?
a écrit :
Par contre pour le fait qu'il reste bloqué sur le "load" de certaine image png ça pourrait être dû à quoi?

Au poids de ces images par exemple...ton image de fond pèse tout de même 93 Ko + ton png + le contenu que tu ne manqueras pas d'ajouter...ça risque de faire beaucoup au final, sachant que le poids moyen d'une page varie entre 100 et 150 Ko...Il faudra en tenir compte sous peine, éventuellement, d'avoir ces "lenteurs d'affichage", ce qui pourrait, toujours éventuellement, faire fuir ceux qui voudraient lire tes pages Smiley cligne
Mais cela peut également venir du serveur, de ta machine, de l'état des lignes, de ton éloignement du dslam, du temps qu'il fait et biensûr de l'indice du taux de succès auprès de la déesse scoumoune Smiley lol
Smiley cligne
Sujet clos
Aller à