Halloween - Position Images

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="https://diztest.blog4ever.com/blog/url_artimage-205392-2246197-8148.html">
</div>


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


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


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


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


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


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


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


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

 

 


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


 

Avec le nouveau composeur :

<script type="text/javascript">// <![CDATA[
document.write('<div style="width:600px; margin: 10px auto; border-bottom:1px solid #000;">' +
'<marquee direction="right" scrollamount="10" scrolldelay="250">' +
'<img src="https://diztest.blog4ever.com/blog/url_artimage-205392-2246404-13685.html">' +
'</marquee></div>');
// ]]></script>

 

Avec l'ancien composeur :

<div style="width:600px; margin: 10px auto; border-bottom:1px solid #000;">
<marquee direction="right" scrollamount="10" scrolldelay="250">
<img src="https://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="https://diztest.blog4ever.com/blog/url_artimage-205392-2246367-8212.html">
</div>

 


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

 


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

 


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

 


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

 


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

 



10/10/2009
5 Poster un commentaire

A découvrir aussi


⨯

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 339 autres membres

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso