ombrage en css... j'arrive pas!

[dogui]

salut tout le monde

bon comme tout le monde je veux faire un beau template graphique avec un magnifique effet d'ombre.

Donc apres multiples recherches j'ai bien fait quelque chose:

<style type="text/css" media="all">

* {padding: 0; margin: 0;}

html, body { 

   height: 100%; 

}


div#corps { 

   background-image: url(image/fond_1_bande.jpg); 
   background-repeat: repeat-x;

   height: auto !important; 

   height: 100%; 

   min-height: 100%; 

}

div#conteneur	  {
	margin-left: auto;
	position: absolute;
	width: 635px;
	background-image: url(image/ombres.png) !important;
	background-image: none;
	background-repeat: repeat-y;
	background-position: left top;
	padding-right: 9px;
	padding-left: 9px;
	z-index: 50;
}

div#cadre_blanc{
				position:relative; width:635px; height:auto; z-index:2; top: 30px; background-color:#FFFFFF; margin-left: auto; margin-right: auto; 
				}

Mon ombre est dans "conteneur" et c'est l'image ombre.png et j'aimerais donc que celle ci soit l'ombre de "cadre_blanc".

Mais ça ne marche pas donc si quelqu'un pourrait me donner un coup de main car là je galère beaucoup avec les css mais je pense que ça vaut le coup de faire du Web accessible!

Voilà merci!

Mickael

[mamijo]

les petits mots magiques sont "transparence png" à mettre dans la case recherche du hub ...

En fait IE ne traite pas la transparence des png comme les autres navigateurs, et il y a plusieurs topics sur le sujet.

Indispensable : mettre au point aussi au moins sur firefox

[ghost]

Bonjour,

Vite fait, il n'y a pas comme un défaut là ?

background-image: url(image/ombres.png) !important;

background-image: none;

Ta derniere ligne n'annule pas la première ?

Cordialement.

[dogui]

Merci de vos réponses!!

Pour IE justement c'est pour ça que j'ai mis !important... il le prend pas en compte!!

Apres j'ai beau enlevé le background-image: none; ça ne change rien

Modifié 13 Juin 2006 par dogui

[Dudu]

Ta derniere ligne n'annule pas la première ?

Uniquement dans Internet Explorer.

La mention "!important" placée derrière une règle fait que cette règle devient la plus haut placée en terme de priorité. Rien ne l'annule, rien ne la surpasse (pas même une CSS navigateur chez le visiteur).

Sauf qu'IE ne reconnaît pas cette mention: c'est donc devenu un hack assez connu pour faire passer une info normale aux navigateurs normaux tandis qu'on fait passer une autre info à Explorer

[ghost]

Merci Dudu,

C'est vrai que je n'utilise pas souvent ce genre de subtilités ... Compte tenu du "retard" d'IE dont j'espère naïvement une mise à jour efficace, je me dis qu'il vaut mieux éviter les hacks.

Mais ça pourrais servir un jour.

Cordialement

[captain_torche]

Rien ne l'annule, rien ne la surpasse (pas même une CSS navigateur chez le visiteur).

Tiens, tu m'apprends un truc, là ...

C'est pas trop dangereux (dans le cas où un visiteur visuellement déficient utiliserait sa CSS perso pour grossir les polices de caractères, par exemple ?)

[Dudu]

Compte tenu du "retard" d'IE dont j'espère naïvement une mise à jour efficace, je me dis qu'il vaut mieux éviter les hacks.

Mais ça pourrais servir un jour.

Ça ne va plus servir beaucoup à l'avenir, ou en tous cas de moins en moins.

La version 7 d'Internet Explorer nous montre que chez Microsoft on a décidé de ne plus se laisser 'piéger' par des hacks, sans pour autant corriger les erreurs d'implémentation

Un coup dans l'eau, donc ..

Pour ce qui est d'attendre une mise à jour efficace, je pense malheureusement qu'on risque d'attendre longtemps.

D'un autre côté, c'est nous utilisateurs qui décidons du marché. D'où l'intérêt d'une campagne massive de switch.

Si plus personne n'utilise Explorer, ils finiront bien par rendre les armes du côté de Redmond (on n'y est pas encore, je te l'accorde )

C'est pas trop dangereux (dans le cas où un visiteur visuellement déficient utiliserait sa CSS perso pour grossir les polices de caractères, par exemple ?)

C'est le problème. Comme pour tout, il faut se servir avec modération des outils mis à notre disposition si on ne veut pas qu'ils se retournent contre nous.

Ceci étant dit, rares sont les fois où il faut ajouter un "!important" derrière une déclaration de taille de police. Habituellement c'est plutôt sur des règles qui ne poseront pas trop de problèmes à une cible handicapée.

Dernier point: cette mention "!important" est plutôt réservée par définition à des CSS navigateur justement, donc en local. Et si j'ai bonne mémoire un conflit de deux "!important" est toujours au profit de la CSS locale sur le navigateur quand elle existe. Pour un conflit au sein d'une même CSS, on repart sur la règle de la dernière déclaration.

J'avais trouvé un article très intéressant sur la gestion des priorités en CSS mais impossible de remettre la main dessus Je le poste si je le retrouve.

[captain_torche]

Ok, merci

[dogui]

Merci pour toutes ses explications sur le !important!!

En plus de me coucher moins bete ce soir, j'ai réussi à faire fonctionner mon effet d'ombrage... en fait il se cachait derrière un autre div!!

merci pour vos conseils!!