28173 sujets

CSS et mise en forme, CSS3

Balise DIV et png transparent

Bonjour, j'ai longuement cherché des info sur la transparence et IE, et j'ai trouvé mon bonheur sur le forum.
Il me reste un petit souci.
Dans mon script, si je mets le style dans le DIV, cela fonctionne, et donne:
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale' src='test.png');height: 200px; width: 100px">...<div>

Dans ce cas, ca marche.
mais si j'essaye de mettre le style dans une feuille css a part, cela ne fonctionne plus.
Voici le deuxieme code:
Head : 
<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style/test2.css">
		<![endif]-->

body
<DIV ID="header">...</div>

La feuille de style:
#header {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale' src='test.png');
}


Pourriez vous m'aider à résoudre ce problème ?
Merci d'avance.
a écrit :
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="style/test2.css">
<! endif -->


Pourquoi IE 7 Qui n'est pratiquement pas utilisé.
Tu test uniquement sur IE 7?
Tu le sais peut-être déjà mais ce filtre fonctionne à partir de IE 5.5.
Bonjour,

La syntaxe du commentaire conditionnel est correcte (Hermann : if lt IE 7 = "Si version d'IE strictement inférieure à 7, donc IE5.0 à 6.0).

En revanche, une source d'erreur possible : quand tu passes la propriété CSS dans un fichier de feuille de style, l'url de l'image doit être relative à ce fichier CSS, et non plus au fichier HTML. Ton code ci-dessus suppose donc que l'image, la feuille de style et le fichier HTML sont dans le même répertoire. Est-ce bien le cas ?

Sinon, le problème peut également venir de l'absence de dimensions données à #header.
Modifié par Laurent Denis (31 Jan 2006 - 04:48)
Laurent Denis a écrit :

Sinon, le problème peut également venir de l'absence de dimensions données à #header.


Cela signifie quoi? la dimension ?
Mes fichiers images et css sont dans un répertoire nommé style, et mon fichier html est à la racine
Alors voilà si cela interesse encore quelqu'un.

J'ai cherché un moment pour faire fonctionner les png 24 bits sur ce satané IE en utilisant les CSS et le truc de Mr Microsoft c'est a dire le "filter".
Bon bha finalement tu as po vraiment d'erreur dans ton code il me semble mais finalement c plutôt des choses que je ne trouve po très logique qui intervinnent.

Donc voici d'apres mes expérimentations :
- tu ne doit pas utiliser les <div id="maDiv">, mais les classes. Enfin un autre truc important pour pas se prendre la tête 2 heures et aller se pendre qd on se rend compte d'où le dernier problème vient (ca pu le vécu je sé Smiley langue ) les liens vers l'image ds l'élément "filter" de la CSS est relatif au chemin de la page ou doit être chargée l'image et non pas relatif à la CSS.

voici alors la CSS : 


.maClass{
  
width:771px;
height : 125px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src="monImage.png", sizingMethod=crop);

}


Attention de donner une taille fixe, c'est a cause d'une histaoire de layout je crois. quelques infos ici : http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp[/url]


En conclusion je crois que ton prob venait surtout de l'utilisation de "id".
Voilà en espérant de pas avoir dit trop n'importe quoi Smiley biggrin
Modifié par Elzean (22 Mar 2006 - 23:55)
Bonsoir,

2 (ou 3) petites précisions :

1.
a écrit :
tu ne doit pas utiliser les <div id="maDiv">, mais les classes.

je crois que ton prob venait surtout de l'utilisation de "id".

Faux.
La propriété "filter" fonctionne très bien sur les id. Si tu as eu l'impression que non, c'est qu'il y avait un autre pbm, soit dans le html, soit dans le css.

2.
a écrit :
Enfin un autre truc important pour pas se prendre la tête 2 heures et aller se pendre qd on se rend compte d'où le dernier problème vient (ca pu le vécu je sé langue ) les liens vers l'image ds l'élément "filter" de la CSS est relatif au chemin de la page ou doit être chargée l'image et non pas relatif à la CSS.

Vrai !.
C'est effectivement un pbm qui a également été "vécu" Smiley cligne de mon côté ! (et on y passe effectivement 2 heures avant de comprendre...)
Le meilleur moyen que j'ai trouvé pour ne plus avoir de problème avec les chemins, c'est de choisir une organisation de fichiers adéquate : un répertoire pour les css, un pour les pages et un pour les images, tous au même niveau de l'arborescence.
Ainsi, que ce soit dans un css (pour les propriétés background) ou dans une page (pour les balises img), on met "../images" et on n'a plus à se soucier de savoir si c'est par rapport à la page ou au css, puisque c'est la même chose... Smiley smile

3.
a écrit :
Attention de donner une taille fixe

Vrai.
C'est effectivement parfaitement expliqué par Microsoft.
Sujet clos
Aller à