Superposer des images

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Superposer des images

pika842

Bonjour,
Je suis en train de refaire un site qui a été fait avec dreamweaver (code souvent un peu lourd..) et je ne sais pas comment superposer des images.
Je m'explique : le code était fait en gérant les images avec des "position:absolute", des "z-index" puis left et top pour la position.
Comme la page n'était pas centré (elle partait du coin en haut a gauche) cela ne pose pas de problème selon les différentes résolution.
Mais moi je veux centrer ma page, (en utilisant un tableau), je ne peux donc pas mettre de position absolute car selon la résolution utlisée par l'utilisateur les images ne seront pas au meme endroit.

N'y a t il pas un moyen de mettre plusieurs images dans une cellule d'un tableau en position relative par rapport à cette cellule ?
(je veux que toutes les images soit en position relative par rapport a la cellule et non pas relative par rapport à la derniere image affiché)
Comme ca les images se superposeront..
J'espere que je me fais comprendre.

Voici le site en question, mon problème peut s'appliqué pour la 1ere page par exemple.
http://www.somatotherapie.net/

Merci beaucoup.

Publicité

afbilou

pouet your life

Tu as une mauvaise connaissance des position relative et absolute.

Position : relative

L'élément possède un flag "positionné"
L'élement sera décalé par rapport a sa position normal (sans position: relative) en fonction de top, left, bottom, right.

Position : absolute

L'élément possède un flag "positionné"
L'élément sera positonné par rapport au plus proche parent ayant un flag "positionné" en fonction de top, left, bottom, right. S'il n'existe pas de parent ayant un flag "positionné" C'est le coin haut gauche du navigateur qui sera utilisé comme origine des coordonnées.

Placer un élément par rapport a un autre

Code :

<div style="position:relative;">
<div style="position:absolute;top;left;"></div>
</div>

Le position relative active le flag "positionné" mais la position de l'élément ne bouge pas car top, left, bottom, right sont mis a 0 par défaut.

le second div se place par rapport a son plus proche parent ayant le flag "positionné" ... ici c'est le div du haut !

pika842

ha merci beaucoup, en effet j'avais une mauvaise connaissance des positions..
Il me semble que j'ai à peu pres compris maintenant, cepandant je n'ai pas reussi a résoudre mon probleme..
Ma page n'est toujours pas centré, voici mon code actuel :

<body bgcolor="#002189" text="#000000" onLoad="MM_preloadImages('images/une/B_2.jpg')">
<center>
<table border=1>

<tr> <td style="position:relative;">

<div id="Layer1" style="position:absolute; left:0px; top:0; width:850px; height:550px; z-index:1">
<img src="images/une/fond1.jpg" width="850" height="550">
</div>

<div id="Layer6" style="position:absolute; left:0px; top:0; width:129px; height:69px; z-index:6">
<img src="images/une/logo1.jpg" width="175" height="77"></div>

<div id="Layer2" style="position:absolute; left:661px; top:421px; width:99px; height:69px; z-index:7">
<img src="images/une/basdroit.jpg" width="190" height="129"></div>

<div id="Layer3" style="position:absolute; left:648px; top:144px; width:155px; height:142px; z-index:8">
<img src="images/une/cotedroit.jpg" width="47" height="278"></div>

<div id="Layer4" style="position:absolute; left:0px; top:57px; width:247px; height:215px; z-index:9">
<img src="images/une/ecole.jpg" width="540" height="31"></div>

<div id="Layer5" style="position:absolute; left:0px; top:139px; width:158px; height:132px; z-index:10">
<img src="images/une/milieuGauche.jpg" width="180" height="200"></div>

<div id="Layer7" style="position:absolute; left:19px; top:367px; width:69px; height:30px; z-index:11">
<a href="sommaire.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/une/B_2.jpg',1)">
<img name="Image7" border="0" src="images/une/B_1.jpg" width="62" height="52"></a></div>

<div id="Layer8" style="position:absolute; left:19px; top:411px; width:73px; height:68px; z-index:12">
<a href="flash.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/une/B_2.jpg',1)" target="_blank">
<img name="Image8" border="0" src="images/une/B_1.jpg" width="62" height="52"></a></div>

<div id="Layer9" style="position:absolute; left:76px; top:387px; width:100px; height:28px; z-index:13" class="texte">
<font color="#FFFFFF"><b>entrée</b></font></div>

<div id="Layer10" style="position:absolute; left:75px; top:431px; width:144px; height:63px; z-index:14">
<font face="Verdana, Arial, Helvetica, sans-serif" class="texte"><b><font color="#FFFFFF">visite flash </font></b></font></div>

</td></tr>
</table>
</center>
</body>

J'ai donc mis ma cellule en position relative et toutes mes images en position absolute, l'image est donc bien décalé et maintenant elle part de ma cellule mais les images ne sont pas dans la cellule..
Avez vous une astuce pour reussir a centrer ma page ?
Merci beaucoup.

esox_ch

Mon dieu le foutoir ...
Separe tout tes truc de style dans un css a part que diable

---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait

pika842

Oui je sais, désolé je vous ai dit, c'est du code issue de dreamwaever..et je l'ai deja amelioré lol !!
J'essayerai de faire un css, mais en attendant vous avez des idées pour mon problème ??
Merci beaucoup.

esox_ch

Deja je vois pas ce qu'un tableau vient fouttr la dedans, ensuite, netoie ton code, et mets le dans les balises code , parceque la ça m'explose les yeux

---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait

pika842

Voila j'ai un peu nettoyé le code, c'est pas parfait mais c'est deja mieux :

Code :

<body bgcolor="#002189" text="#000000" onLoad="MM_preloadImages('images/une/B_2.jpg')">
<center >
<table >
<tr> <td style="position:relative;">
<div id="Layer1" class="Img1" >
<img src="images/une/fond1.jpg" width="850" height="550">
</div>
<div id="Layer6" class="Img2" >
<img src="images/une/logo1.jpg" width="175" height="77"></div>
<div id="Layer2" class="Img3" >
<img src="images/une/basdroit.jpg" width="190" height="129"></div>
<div id="Layer3" class="Img4" >
<img src="images/une/cotedroit.jpg" width="47" height="278"></div>
<div id="Layer4" class="Img5" >
<img src="images/une/ecole.jpg" width="540" height="31"></div>
<div id="Layer5" class="Img6" >
<img src="images/une/milieuGauche.jpg" width="180" height="200"></div>
<div id="Layer7" class="Img7" >
<a href="sommaire.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/une/B_2.jpg',1)">
<img name="Image7" border="0" src="images/une/B_1.jpg" width="62" height="52"></a></div>
<div id="Layer8" class="Img8" >
<a href="flash.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/une/B_2.jpg',1)" target="_blank">
<img name="Image8" border="0" src="images/une/B_1.jpg" width="62" height="52"></a></div>
<div id="Layer9" class="Img9" >
<font class="texte"><b>entrée</b></font></div>
<div id="Layer10" class="Img10" >
<font class="texte"><b>visite flash </b></font></div>
</td></tr>
</table>
</center>
</body>

Le css est de ce genre :

Code :

.Img1{
position:absolute;
left:0px; top:0;
width:850px;
height:550px;
z-index:1;
}

J'ai donc pour chaque image une position absolute.
J'avais mis un tableau pour pouvoir centrer mon tableau (qui comporte qu'une celulle) et mettre mes images à l'interieur mais ca ne marche pas. En effet ca sert a rien car en mettant le "style="position:relative" dans la balise center, ca donne le meme resultat.
Mais alors comment centrer ma page ?

Merci beaucoup.

bustah

who dares, wins

Déjà utilise une div ca sera plus simple que ton tableau, surtout si tu nas que 1 cellule ^^
Après ta div tu lui mets comme hight et width 100% et puis tu places tes images à l'intérieur avec d'autres balises div ^^

---------------
\*Nous ne sommes pas nombreux, mais heureux d'être si peu, parce que nous sommes une bande, nous sommes des frères qui partageons notre sang*/( COS)

pika842

Je sais pas si j'ai bien compris ce que tu m'a dis,voila ce que j'ai fait mais ca donne le meme resultat : l'image part du centre mais n'est pas centrer.

Code :

<center>
<div style="position:relative; width=100%; height=100%;">
<div id="Layer1" class="Img1" >
<img src="images/une/fond1.jpg" width="850" height="550">
</div>
<div id="Layer6" class="Img2" >
<img src="images/une/logo1.jpg" width="175" height="77"></div>
<div id="Layer2" class="Img3" >
<img src="images/une/basdroit.jpg" width="190" height="129"></div>
<div id="Layer3" class="Img4" >
<img src="images/une/cotedroit.jpg" width="47" height="278"></div>
<div id="Layer4" class="Img5" >
<img src="images/une/ecole.jpg" width="540" height="31"></div>
<div id="Layer5" class="Img6" >
<img src="images/une/milieuGauche.jpg" width="180" height="200"></div>
<div id="Layer7" class="Img7" >
<a href="sommaire.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/une/B_2.jpg',1)">
<img name="Image7" border="0" src="images/une/B_1.jpg" width="62" height="52"></a></div>
<div id="Layer8" class="Img8" >
<a href="flash.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/une/B_2.jpg',1)" target="_blank">
<img name="Image8" border="0" src="images/une/B_1.jpg" width="62" height="52"></a></div>
<div id="Layer9" class="Img9" >
<font class="texte"><b>entrée</b></font></div>
<div id="Layer10" class="Img10" >
<font class="texte"><b>visite flash </b></font></div>
</div>
</center>

Merci en tout cas. D'autres idées ?

bustah

who dares, wins

Il doit y avoir un attribut pour centrer les div, align: center, ou qqc du genre (à tester à la place de <center> )

---------------
\*Nous ne sommes pas nombreux, mais heureux d'être si peu, parce que nous sommes une bande, nous sommes des frères qui partageons notre sang*/( COS)

Publicité

pika842

c'est bon j'ai reussi ..

voila le code est final :

Code :

<center>
<div id="Layer1" class="Img1" >
<img src="images/une/fond1.jpg" width="850" height="550">
<div id="Layer6" class="Img2" >
<img src="images/une/logo1.jpg" width="175" height="77"></div>
<div id="Layer2" class="Img3" >
<img src="images/une/basdroit.jpg" width="190" height="129"></div>
<div id="Layer3" class="Img4" >
<img src="images/une/cotedroit.jpg" width="47" height="278"></div>
<div id="Layer4" class="Img5" >
<img src="images/une/ecole.jpg" width="540" height="31"></div>
<div id="Layer5" class="Img6" >
<img src="images/une/milieuGauche.jpg" width="180" height="200"></div>
<div id="Layer7" class="Img7" >
<a href="sommaire.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/une/B_2.jpg',1)">
<img name="Image7" border="0" src="images/une/B_1.jpg" width="62" height="52"></a></div>
<div id="Layer8" class="Img8" >
<a href="flash.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/une/B_2.jpg',1)" target="_blank">
<img name="Image8" border="0" src="images/une/B_1.jpg" width="62" height="52"></a></div>
<div id="Layer9" class="Img9" >
<font class="texte"><b>entrée</b></font></div>
<div id="Layer10" class="Img10" >
<font class="texte"><b>visite flash </b></font></div>
</div>
</center>

Et l'image 1 est en position relative , les autres sont en absolute.

Merci pour tout.

FORUM HardWare.fr

Programmation

HTML/CSS

Superposer des images

Sujets relatifs
images defilantes php	Comment superposer deux images sur un JButton?
Superposer 2 images	superposer 2 images en PHP
Superposer des images, c'est possible en htm?	gerer des calques pour superposer des images
[PHP] Superposer 2 images	superposer deux images?
[HTML] Superposer deux images....	COMMENT SUPERPOSER DEUX IMAGES ?
Plus de sujets relatifs à : Superposer des images

Page générée en 0.087 secondes