[Calque] Positionnement relatif

**hedgehog** · 27/03/2008, 09h54

Bonjour à tous,

Je manipule dans un de mes script un calque contenant un calendrier.
Au chargement de la page, un script Javascript calcule les coordonnées d'un objet de référence par rapport auquel je souhaite placer mon calque calendrier, puis positionne ce calque selon les coordonnées calculées.

La question que je me pose est, lorsque l'on positionne un calque via Javascript (document.getElementById('monDiv').style.left ...), celui se positionne-t-il par rapport à la fenétre ou par rapport à son objet parent ?

Car lorsque j'utilise cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var espaceGauche = 200;
var espaceHaut = 50;
document.getElementById(objetPos).style.left=espaceGauche;
document.getElementById(objetPos).style.top=espaceHaut;

le calque ne se positionne pas de la même maniére sous FF et sous IE.

Pouvez-vous m'éclairer ?

Merci d'avance

**beeboo** · 27/03/2008, 11h57

Salut,

Essaie ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var espaceGauche = '200px';
var espaceHaut = '50px';

**hedgehog** · 27/03/2008, 12h12

Merci de ta réponse mais le probléme est toujours le même, la disposition n'est pas la même sur les deux navigateurs.

**beeboo** · 27/03/2008, 12h28

Est-ce que tu as mis la propriété position:absolute; ?

**Erwan31** · 27/03/2008, 13h20

Bonjour,
si tu n'as pas précisé de positionnement relatif pour un des conteneurs, le
calque enfant positionné en absolute se positionne par rapport au bloc
conteneur initial c-à-d au viewport (zone de visualisation) qui est définit par
la norme CSS comme étant le body.

**hedgehog** · 27/03/2008, 13h32

Beeboo : Oui

Erwan31 : Merci pour cette info mais j'ai quand même une différence de près de 150 px sur la largeur entre FF et IE, ca fait gros comme marge non ? lol

**Erwan31** · 27/03/2008, 13h57

Pourrais tu donner la TOTALIT2 du de ton code XHTML(sans asp/php) et CSS.
D'autre part tu dois préciser si c'est IE6 ou IE7.

**hedgehog** · 27/03/2008, 14h22

Voici une partie du code :

Page principale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<body id="corps" onLoad="positionneElement('affCal','calqueCalendrier')">
 
...
 
<a href="javascript:;" id="affCal" onClick="switchDivVisibility('calqueCalendrier')" style="cursor:pointer">S&eacute;lectionnez une date cible</a>
<div id="calqueCalendrier" style="visibility:hidden"> <!--  -->
   <script language="javascript">afficheCalendrier(3,2008,'calqueCalendrier','url','gestionInterne.CRA.inc.php');</script>
</div>
...

Fonction Js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function positionneElement(objetRef,objetPos) {
    var espaceGauche = document.getElementById(objetRef).offsetLeft || 0;
    var espaceHaut = document.getElementById(objetRef).offsetTop || 0;
    var objet = document.getElementById(objetRef);
    while (objet = objet.offsetParent) { // On parcours un à un les parents de chaque Objet parcouru et on récupére leur position
		espaceGauche += objet.offsetLeft;
		espaceHaut += objet.offsetTop;
    }
	document.getElementById(objetPos).style.left=espaceGauche;
	document.getElementById(objetPos).style.top=espaceHaut;
}

**hedgehog** · 28/03/2008, 09h51

Le probléme est réglé.

Je n'avais tout simplement pas défini de taille à mon calque

[Calque] Positionnement relatif

Positionnement en CSS

Discussions similaires

Partager

Partager