[HTML/CSS] Placement d'une <div > sur une image
Placement d'une <div > sur une image [HTML/CSS] - HTML/CSS - Programmation
Marsh Posté le 25-06-2003 à 15:15:35
position: absolute;
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-06-2003 à 15:20:09
ok donc déjà ça c'est vu, pas de relatif.
Pour les divs, comment tu ferais pour l'espace blanc qu'elles laissent derrière elles ? bas de la page ?
Marsh Posté le 25-06-2003 à 15:22:19
gni ? Quel espace blanc ? URL ?
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-06-2003 à 15:32:08
Je m'explique:
tu crée une div dans ta page, ça crée donc un "espace" pour cette div et c'est dans cet espace qu'est affiché le contenu de la div si tu ne change pas la position avec position, left, top...
Maintenant si tu déplace cette div avec position:absolute ou autre, le contenu de la div se déplace, mais là où il était et bien il y n'y a plus qu'un espace vide...
Bon si c'est toujours pas clair je ferais des pages...
Marsh Posté le 25-06-2003 à 15:40:40
Ben non justement, en positionnement absolu ça ne laisse pas de place. En relatif oui, mais pas en absolu.
Tu peux tout à fait avoir du texte (dans le flux normal) et un bloc en position absolue par dessus.
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-06-2003 à 16:28:34
Pour continuer dans le placement absolu:
si je veux bouger ma div avec javascript, je dois obligatoirement spécifier top et left dans le style de ma div sans quoi je n'y aurais pas accès dans javascript. Mais comment faire pour récupérer par exemple le top et left de ma div sans la placer "à la main"?
Marsh Posté le 25-06-2003 à 16:34:11
tonElement.style.top ?
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-06-2003 à 16:42:16
Oui oui ça c'est bon le code en javascript, mais le truc si tu veux c'est que pour avoir accès à style.top par exemple il faut OBLIGATOIREMENT avoir mis dans le style de l'élément "top:20px". Donc moi je veux pas dire à ma div d'aller se placer à 20px, je veux juste récupérer en JS son top, sans lui spécifier au préalable...
<div id="myId" style="position:absolute;top:50px">
alert(tonElement.style.top); -> ok c'est bon
<div id="myId" style="">
alert(tonElement.style.top); -> non ça n'affiche rien
Message édité par antsite le 25-06-2003 à 16:42:31
Marsh Posté le 25-06-2003 à 16:51:05
Mais quel est l'intérêt de récupérer une valeur qu'on ne veut pas définir ? ![[:mlc]](https://forum-images.hardware.fr/images/perso/mlc.gif "[:mlc]")
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-06-2003 à 16:57:21
et bien j'ai une image qui est placée dans une div, cette image est centrée et je voudrais récupérer son top & left, comment tu ferais ?
Message édité par antsite le 25-06-2003 à 16:57:32
Marsh Posté le 25-06-2003 à 17:11:59
Ah ok tu parlais de l'image 
Dans ce cas essaye tonElement.offsetTop et tonElement.offsetLeft (ça marche avec Moz, il se peut que ce soit différent avec IE, dans ce cas -> MSDN) Attention il s'agit là du décalage par rapport à l'élément parent, donc à adapter selon l'endroit où se trouve ton image dans ton code.
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-06-2003 à 17:32:13
Oui donc c'est pas mal, le petit hic c'est comme tu dis sous moz c'est ok, sous IE presque, y a juste que sous IE ben offsetTop vaut zero pour une div parente comme ça :
<body>
<div>
<img.../>
</div>
</body>
alors que sous moz ben offsetTop = 8, ce qu'il me faut...
MSDN m'apporte pas grand chose à ce niveau, il me dit ce que tu m'as expliqué (coord en fonction du parent,...)
Marsh Posté le 25-06-2003 à 17:49:41
Mozilla doit donner la position par rapport à l'extérieur de <body> alors que IE c'est par rapport à l'intérieur (ajoute une bordure à <body> pour t'en convaincre).
Si je ramène la marge de <body> à 0, j'obtiens 0 pour offsetTop sur les 2 navigateurs.
---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Marsh Posté le 25-06-2003 à 17:52:40
Ouais nickel, j'ai mis la marge à zéro et j'ai remis cette marge dont j'avais besoin dans ma div parente et ça marche!
encore une fois merci gm_superstar 
(pour ta FAQ aussi!)
Marsh Posté le 25-06-2003 à 18:35:25
Oh oh mais c'est que j'ai encore des problèmes moi...
Je voudrais placer une div relativement à une autre (qui n'est pas son parent).
Donc je peux récupérer son top & left et ensuite avec ça placer ce que je veux, mais le problème c'est que je peux pas faire des opérations sur style.left car c'est une string (IE met donc à disposition pixelLeft,...), est-ce que l'on peut faire un découpage de chaine bateau supposant que c'est toujours "px" qui vient après le nombre pour récupérer la donnée ?
Marsh Posté le 25-06-2003 à 18:46:07
c bon j'ai trouvé pour avoir la position absolue sous forme numérique :
elementParent.offsetParent.offsetLeft + elementFils.offsetLeft
et ça marche sous moz et IE
Sujets relatifs:
- [CSS] equivalent de cellspacing="0" ?
- traitement d'image
- [HTML/JS] Revenir x page(s) en arrière et faire un refresh
- [HTML/CSS] Centrer une div ayant un width:50px;
- [HTML] Impression de page sans url en bas ?
- [CSS] Travailler sur le background d'une <div>
- [ HTML / XHTML ] Insertion de vidéo ( mozilla )
- HTML : input type=file et valeur par défaut
- CSS : la couleur d'un lien
Marsh Posté le 25-06-2003 à 15:06:07
Salut,
Mon objectif est de placer une div sur une image à une position donnée. J'élimine d'avance la solution du background-image car mon image a besoin d'être redimensionnée.
Donc je pense que je suis obligée de passer par position: & top left... enfin tout ça quoi, mais évidemment si je bouge ma div il y a un espace blanc qui se crée à l'espace initial où la div devait être crée. Donc y a-t-il moyen de ne pas avoir cet espace. Je pense pas, donc je mets ma div en bas de ma page pour pas que ça se voit, mais comment faire pour le placement...
Car en fait je veux placer ce texte toujours à la même position dans l'image, quelque soi résolution, par exemple à 2px du haut et 3px de la gauche.
Enfin si vous avez des conseils