[RESOLU] Blocs flottant ET positionné

Bonjour,
j'ai un peu cherché mais je n'ai pas trouvé l'info (peut être parce que c'est une idée trop bizare )

J'explique :
Contexte : un site de vente en ligne (désolée je peux pas mettre le lien, c'est pour le boulot, ça craint de le mettre ), avec une page boutique qui ressemble à un peu toutes les boutiques avec des vignettes pour les produits (un peu comme là http://www.photoways.com/boutique/objets-cadeaux )

Problème : on me demande de mettre en surimpression des images indiquant des mentions comme "promo" (un peu comme là http://www.vente-unique.com/uploads/product/250/vignette_soldes.png ) PAR DESSUS les vignettes existantes.

Donc moi je pense direct "il faut mettre des divs positionnés, leur donner la même position et ils vont se recouvrir, pas de problème"

mais si, problème : les vignettes sont générées en php et sont placées les unes à coté des autres en flottant. En fait le php fait une boucle pour chaque objet de la base et le sort dans un

<dl class="produit">
   <dt>objet</dt>
   <dt class="images"><a>image de l'objet</a></dt>
   <dd class="spec">détails sur l'objet</dd>
   <dd class="price">x euros</dd>
    <dd class="go"><a>btn commander</a></dd>
</dl>

Le css du dl.produit est

float:left;
position:relative;
height:350px; width:250px;
background-image: imagedefond.jpg;
margin: 0 10px 10px 0;

La position est relative parce qu'un des dd est placé en absolu dans le bloc.


J'ai tenté d'appliquer le tuto sur les positionnements trouvé sur alsacréations, mais je n'y arrive pas :
- soit je mets du positionnement absolu (sur le div de l'image solde, et sur un div englobant le <dl>) et j'ai bien ma surimpression "soldes" sur l'image, mais j'ai surtout toutes les vignettes placées les unes sur les autres, logique, elles se placent là où on leur dit d'aller
- soit je mets position relative sur les deux div et dans ce cas, il place les éléments les uns à coté des autres. Un bloc avec l'objet, puis le bloc avec "soldes", etc
- soit j'essaye de bidouiller et ça fait n'importe quoi



Pensez vous que ce soit possible de placer des divs en surimpression sur d'autres divs générés automatiquement et placés en flottant?

Merci d'avance de vos lumières
Modifié par ginette_78 (15 Sep 2008 - 11:41)

Salut,

Si tu places ton img en block et en relative et ta surimpression en absolute?

.images img{
position: relative;
display: block;
}

.promo{
position: absolute;
left: ...;
top: ...;
width: ...;
height: ...;
}

   <dt class="images"><a>image de l'objet<span class="promo"></span></a></dt>

ou ta class images en relative et

   <dt class="images"><a>image de l'objet</a><span class="promo"></span></dt>

merci pour l'idée, je vais essayer ça je vous tiens au courant !

un grand merci ça marche

je mets mon sujet en [résolu] tout de suite