Halloween - Position Images

ACCUEIL <<< Partie Contenu <<<

Au début de cet article, un cadre est dessiné pour étudier le positionnement "absolute" des images par rapport à une DIV en position "relative". Les images se placent à l'intérieur avec une valeur positive et à l'extérieur avec une valeur négative. Cliquez sur les images vous accéderez à un bloc contenant le code utilisé pour son positionnement.

Les images hors du cadre se positionneront en fonction des valeurs des attributs : left, right,top et bottom dans le cadre parent, en position relative c'est à dire en l'occurence la partie "Cadre"...
Regardez la citrouile en bas de page à droite et cliquez dessus pour voir le code.

Ci-dessous les codes HTML pour positionner chaque image...

<div style="position: absolute; top: -47px; left: 100px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246197-8148.html">
</div>

<div style="position: absolute; top: -50px; left: 300px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246203-2751.html">
</div>

<div style="position: absolute; top: 5px; left: 5px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246351-20411.html">
</div>

<div style="position: absolute; top: -35px; right: 5px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246259-1897.html">
</div>

<div style="position: absolute; bottom: -0.5px; left: 9px; top: 405px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246366-7173.html">
</div>

<div style="position: absolute; left: 519px; top: 428px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246367-8212.html">
</div>

<div style="position: absolute; top: 176px; left: 250px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246369-14400.html">
</div>

<div style="position: absolute; top: 355px; left: 280px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246978-2590.html">
</div>

<div style="position: absolute; top: 52px; left: 149px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246486-11454.html">
</div>

 

Image défilante de gauche à droite, utilisation de la balise "Marquee".

<div style="width:600px; margin: 10px auto; border-bottom:1px solid #000;">
<marquee direction="right" scrollamount="10" scrolldelay="250">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246404-13685.html">
</marquee></div>

 

 

 

Les images positionnées hors du cadre qui s'afficheront sur l'écran par rapport à la partie "Cadre", quiest en position relative.
La première en plus est en position "fixed", elle sera toujours visible, elle ne suivra pas le défilement dela page, c'est la page qui défilera en-dessous.

<div style="position: fixed; top: 450px; left: 220px; width: 75px; height: 75px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246367-8212.html">
</div>

 

<div style="position: absolute; top: 50px; left: 50px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246508-2111.html">
</div>

 

<div style="position: absolute; top: 3%; left: 20%;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246197-8148.html">
</div>

 

<div style="position: absolute; top: 5%; left: 70%;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246203-2751.html">
</div>

 

<div style="position: absolute; top: 2%; right: 1%;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246537-13781.html">
</div>

 

<div style="position: absolute; bottom: 100px; left: 20px;">
<img src="http://diztest.blog4ever.com/blog/url_artimage-205392-2246367-8212.html">
</div>

 

Liens