[Résolu]Superposition

Salut à tous

Bon, je dois m'occuper d'un section type "dernières images ajoutées" et voulant donner un peu plus de style aux images, j'ai testé plusieurs choses et j'ai choisi une ombre interne. Mais je me vois mal retoucher toutes les images envoyées une par une sous photoshop ...

Y'a-til donc un moyen, de superposer deux images, celle en deuxième plan étant l'image de base, et celle au premier plan, l'image de l'ombre en profitant de la transparence gif ou png (mais apparement le png est mal géré par IE ...)

En vous remerciant
Modifié par antonin.design (27 Aug 2007 - 01:00)

Bonjour,

Oui c'est assez facile. la propriété z-index permet de gérer les plans (ce que tu appelles premier plan et deuxième plan).

IE ne gère effectivement pas correctement la transparence PNG. Je te suggère de mettre l'ombre au second plan pour oublier ce problème de transparence et le tour est joué.

antonin.design a écrit :
Je suis par contre obligé de mettre l'ombre au premier plan, car je parle d'une ombre interne à l'image par contre j'ai peur de la qualité de la transparence gif ...

Effectivement tu vas entrer en zone difficile.
Pour ma part je juge la transparence gif non opérationnelle. J'utilise couramment la transparence PNG, mais comme IE n'en tient pas compte nativement j'emploie aussi un script (très propre) qui améliore IE dans son rapport aux standards, notamment vis à vis des PNG. Je ne te cache pas que la solution est loin d'être idéale car les internautes IE n'acceptant pas javascript n'auront évidemment pas le résultat attendu.

Merci
mais je préfere essayer de ne pas utiliser de javascript et de faire un site en full-CSS

J'ai aussi un autre problème, lorsque j'essaye de mettre une image (de la meme taille) sur l'autre, elle se place à côté, quel morceau de code dois-je utiliser ?..

Il faut que l'une des 2 images bénéficie d'un positionnement absolu ou relatif, et que tu décales la position de ton image à l'aide des propriétés left, top bottom, right (il est suffisant d'en utiliser 2 sur les 4).

J'y arrive pas ... L'image au deuxième plan, donc l'image qui a de l'interet est en position:absolute placée avec des margin top et left, et l'image de l'ombre avec exactement les mêmes réglages avec un z-index:3

Et l'image de l'ombre se place à gauche de l'autre .. Par contre niveau margin-top c'est bon


Modifié par antonin.design (26 Jul 2006 - 13:24)

J'ai parlé des propriétés left et top. Il ne s'agit pas du tout ni de margin-left ni de margin-top.

Tu pourrais m'en dire un peu plus stp ? me donner un exemple concret, car à vrai dire, je ne connaissais ni les propriétés z-index, lefet et top ...

Ah ? mais si tu cherchais un petit peu... : positionnement relatif et positionnement absolu