Superposer des images
Superposer des images - HTML/CSS - Programmation
Marsh Posté le 03-07-2006 à 14:15:16
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 :
|
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 !
Marsh Posté le 04-07-2006 à 08:52:26
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.
Marsh Posté le 04-07-2006 à 09:15:53
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
Marsh Posté le 04-07-2006 à 11:06:46
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.
Marsh Posté le 04-07-2006 à 11:12:10
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
Marsh Posté le 04-07-2006 à 15:43:14
Voila j'ai un peu nettoyé le code, c'est pas parfait mais c'est deja mieux :
Code :
|
Le css est de ce genre :
Code :
|
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.
Marsh Posté le 05-07-2006 à 09:05:16
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)
Marsh Posté le 05-07-2006 à 11:15:18
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 :
|
Merci en tout cas. D'autres idées ?
Marsh Posté le 05-07-2006 à 11:18:35
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)
Marsh Posté le 05-07-2006 à 12:22:09
c'est bon j'ai reussi ..
voila le code est final :
Code :
|
Et l'image 1 est en position relative , les autres sont en absolute.
Merci pour tout.
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 ?
Marsh Posté le 03-07-2006 à 14:02:15
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.