Version complète: sur le forum Webmaster Hub : ombrage en css... j'arrive pas!
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
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:

CODE
<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 smile.gif
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
Dudu
CITATION(ghost @ mardi 13 juin 2006, 14h01) *
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 wink.gif
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
CITATION(Dudu @ mardi 13 juin 2006, 14h29) *
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
CITATION(ghost @ mardi 13 juin 2006, 16h07) *
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 sad.gif
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 biggrin.gif)
CITATION(captain_torche @ mardi 13 juin 2006, 16h08) *
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 sad.gif Je le poste si je le retrouve.
captain_torche
Ok, merci wink.gif
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!!
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.