[HTML/CSS] Placement d'une <div > sur une image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/CSS] Placement d'une <div > sur une image

antsite

Je me souviens

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 :hello:

Publicité

gm_superstar

Appelez-moi Super

position: absolute;

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

antsite

Je me souviens

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 ?

gm_superstar

Appelez-moi Super

gni ? Quel espace blanc ? URL ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

antsite

Je me souviens

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...
:hello:

gm_superstar

Appelez-moi Super

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

antsite

Je me souviens

ah ben oui merci je savais pas :jap:

antsite

Je me souviens

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"?

gm_superstar

Appelez-moi Super

tonElement.style.top ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

antsite

Je me souviens

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

Publicité

gm_superstar

Appelez-moi Super

Mais quel est l'intérêt de récupérer une valeur qu'on ne veut pas définir ? [:mlc]

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

antsite

Je me souviens

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

gm_superstar

Appelez-moi Super

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

antsite

Je me souviens

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,...)

gm_superstar

Appelez-moi Super

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

antsite

Je me souviens

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!
:hello:

encore une fois merci gm_superstar :jap: (pour ta FAQ aussi!)

antsite

Je me souviens

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 ?

antsite

Je me souviens

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

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML/CSS] Placement d'une <div > sur une image

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
Plus de sujets relatifs à : [HTML/CSS] Placement d'une <div > sur une image

Page générée en 0.045 secondes