S'il s'agit de
superposer, alors là, nous allons complètement changer notre fusil d'épaule :
- oublions les flottants, pas faits pour cela.
- et revenons au positionnement absolu, conçu, lui, à cet effet
Pour commencer, simplifions-nous la vie en plaçant nos deux images à la suite l'une de l'autre dans le même conteneur :
<div id="content">
<div>
<img src="timbre02.gif" height="113" width="87" />
<img src="zazabonh.jpg" height="360" width="480" />
</div>
...
Nous donnons à ce conteneur une
position relative qui ne modifera pas son emplacement, mais qui va lui conférer une propriété essentielle : il peut désormais servir de référence pour le positionnement absolu de ses éléments enfants (nos images)
<div id="content">
<div style="position: relative">
<img src="zazabonh.jpg" height="360" width="480" />
<img src="timbre02.gif" height="113" width="87" />
</div>
...
Nous allons laisser la photographie se placer normalement, mais nous allons littéralement coller dessus le timbre poste :
<div id="content">
<div style="position: relative">
<img src="zazabonh.jpg" height="360" width="480" />
<img src="timbre02.gif" height="113" width="87"
style="position: absolute; top: -42px; right:0;" />
</div>
...
Zut, tout va bien dans Firefox et Opera, mais IE nous joue encore des tours en ne respectant pas tout à fait notre positionnement (tiens, le modèle de boîte pointe le bout de son nez, là). Sans chercher plus loin, un hack brutal va permettre de lui indiquer des valeurs de positionnements qui lui vont bien, tout en gardant les valeurs normales pour les autres navigateurs :
<div id="content">
<div style="position: relative">
<img src="zazabonh.jpg" height="360" width="480" />
<img src="timbre02.gif" height="113" width="87"
style="position: absolute; top: -42px !important;top: -47px; right:0 !important; right: 18px;" />
</div>
...
Hum... Dans l'idéal, il faudrait revoir cela sans le hack. Mais il y a déjà là matière à réflexion, je crois
