[RESOLU] Position:absolute ... ya un problème

Bonsoir,

J'arrive absolument pas à m'expliquer comment mon div "pdf" peut se retrouver au-dessus de mon div "menu" (en flash) alors que leur position "absolute" (pour les 2) est supérieure pour la première !?!?!?

#menu {
	position: absolute;
	top: 75px;
}

#pdf {
	position: absolute;
	top: 125px;
}

A préciser que cela se passe aussi bien sous Firefox que IE ...
Mais bizarrement, IE semble être plus "juste" dans le calcul de la distance ...

Pour l'un ou l'autre problème, quelqu'un a-t-il une suggestion ?

Merci d'avance !

PS : Pour voir en "live" ce dont je parle, voilà l'adresse : http://lindoweb.free.fr
Modifié par kaizersoze10 (20 Jun 2007 - 13:02)

Bonjour kaizersoze10.
Si c'est ce que je pense, j'ais déja eu ce problème plusieurs fois.
Je m'explique:
-ton div menu est t'il a l'intérieur d'un autre div?

Si c'est le cas, il faut que les 2 div (menu et pdf) soient dans le même conteneur pour avoir la même référence en pixel:

html:

<div id="x">
    <div id="menu"
        mes créations.....
    </div>
....
    <div id="pdf">
        <a href="" alt="">telecharger le pdf</a>
    </div>
....
</div>

Je ne connais rien au language flash, donc je te met du css...que tu adapteras:
CSS:

#x {widht: 700px; height: 100%; margin:auto}

#menu {widht: 700px; position:relative; top:75px;}

#pdf {widht: xpx; position:relative; top:125px;}

Ou alors il faut tout mettre directement dans body (et la il faut utiliser position:absolute;)

Voili voilou, essaye ca.
Modifié par Stickmaniak1 (20 Jun 2007 - 09:09)

Hello,

Le problème est plus simple que ça : tu as utilisé l'identifant "menu" sur trois éléments imbriqués : un conteneur div, un object, et un embed. Si tu définis une position à 75px du plus proche ancêtre positionné, tu vas avoir :
- div#menu se décale de 75px vers le bas ;
- object#menu se décale encore de 75px vers le bas ;
- embed#menu se décale encore de 75px vers le bas...

Au passage, tester ta page avec un validateur HTML t'aurait permis de repérer cette erreur par toi-même.

Effectivement, en enlevant le div "menu", ça positionne déjà mieux !
(même si franchement j'ai pas compris le coup du "on décale encore de 75px ..." car j'avais bien mis

* {
margin: 0px;
padding: 0px;
}

dans mon CSS ...)

Et je savais que "embed" était pas valid W3C mais j'avais pas trouvé comment faire apparaître le flash sous Firefox SANS "embed" ...
Maintenant c'est fait !

Encore merci pour vos réponses !

PS : Comment je fais pour mettre "RESOLU" devant mon post ?!?!?
Modifié par kaizersoze10 (20 Jun 2007 - 12:11)

kaizersoze10 a écrit :
(même si franchement j'ai pas compris le coup du "on décale encore de 75px ..." car j'avais bien mis

* {
margin: 0px;
padding: 0px;
}

Deux choses :
- le sélecteur #menu sera prioritaire sur le sélecteur * (et encore heureux, sinon comment peut-on repréciser des marges pour tel ou tel élément ?) ;
- le décalage est dû à la propriété top: 75px, pas à un margin-top.

Pour récapituler :
- div#menu est placé à 75px du haut de son plus proche conteneur positionné (en l'occurence le conteneur global, positionné en relatif) ;
- object#menu est placé à 75px du haut de son plus proche conteneur positionné (en l'occurrence div#menu...) ;
- embed#menu est placé à 75px du haut de son plus proche conteneur positionné (en l'occurrence object#menu).
75+75+75 = 225px du haut du conteneur global. CQFD.

kaizersoze10 a écrit :
PS : Comment je fais pour mettre "RESOLU" devant mon post ?!?!?

Tu édites le titre du premier message de ton sujet, en cliquant sur le bouton «Éditer».

Ok ...
Ben merci pour vos réponses !!!