Navigation

 

 

Il suffit de recopier dans la source de la page, entre <body...> et </body>, le texte suivant pour image1 par un "copier coller" :

<div id="Layer1"
style="position:absolute; left:10px; top:14px;
width:961px; height:85px; z-index:1; background-color: #FFCC00;
layer-background-color: #FFCC00; border: 1px none #000000; visibility:visible">
<h1 align="left">Une présentation bien cadrée !</h1>
<p align="right">Utilisation de l'élément DIV et des feuilles de styles pour obtenir des superposition de surfaces</p>

</div>

<div id="Layer2"
style="position:absolute; left:25px; top:70px;
width:153px; height:492px; z-index:2; background-color: #00CC66;
layer-background-color: #00CC66; border: 1px none #000000; visibility:visible">
<p align="center"><strong>Utilisation des cadres, mais qui ne sont pas des frames.</strong></p>
<p align="left"><em>On peut de plus empêcher la disposition arbitraire du navigateur ! Et
sortir de l'écran.</em></p
>
</div>

<div id="Layer3"
style="position:absolute; left:180px; top:127px;
width:791px; height:493px; z-index:3; visibility: visible">
<p>&nbsp;</p>
</div>

<div id="Layer4"
style="position:absolute; left:551px; top:289px;
width:317px; height:160px; z-index:5; background-color: #0066FF;
layer-background-color: #0066FF; border: 1px none #000000; visibility:visible">
<p align="center">&nbsp;</p>
<h2 align="center">Quand les cadres se superposent...</h2>

</div>

<div id="Layer5"
style="position:absolute; left:443px; top:138px;
width:200px; height:200px; z-index:4; visibility: visible">
<dd>
<p align="center"><img src="promosit.gif" width="200" height="200" align="left"></p>
</dd>
</div>


Chaque "layer#", se comporte comme une couche.
L'ordre des superpositions se fait grâce à
"z-index#.

Retour au début