28173 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement relatif dans IE ?

Bonjour,

Je n'ai pas trouvé de réponse à mon problème :

Sur mon blog Je suis en train de rajouter en haut de page un DIV "languages" positionné relativement à la boîte "rap" contenante qui contient l'ensemble du site. Sur Opéra et Firefox le DIV se place sans problème au bon endroit, mais sur IE7, la boîte est décalée de plusieurs centaines de pixels vers la droite et je n'arrive pas à débugger ça...

Le DIV est codé de cette manière :
Dans le doc XHTML:

<div id="rap">
	<div id="languages">
		<ul>(texte dans LI)</ul>
	</div>
<!-- je vous fais grâce du reste du code; le rap est bien sûr refermé plus loin -->


Et dans la feuille de style :

#rap {
	width : 755px;
	margin : 0 auto;
	padding : 0;
}

#languages {
	background : transparent url(build/bgtransp.png) repeat;
	height : 50px;
	width : 90px;
	position : relative;
	top : 0;
	left : 630px;
}


Quelqu'un a-t-il une idée quant à l'origine de décalage, et comment je peux l'éviter?

Merci d'avance,

Nadège
Modifié par nadglobtrotter (11 Sep 2007 - 19:14)
Salut,

une proposition, modifie de la façon suivante :
rap{
...
position:relative;
...
}

languages{
...
position:absolute;
...
}

Ca fonctionne mieux, non ?
Salut,
c'est pas plutot :

#rap {
        position:relative; /* relative ici */
	width : 755px;
	margin : 0 auto;
	padding : 0;
}

#languages {
	background : transparent url(build/bgtransp.png) repeat;
	height : 50px;
	width : 90px;
	position : absolute; /* et absolute ici (par rapport au coin en haut à gauche du premier parent en position relative) */
	top : 0;
	left : 630px;
}


.. je crois.
Super ! Effectivement ça corrige bien le problème sur IE7. Avec l'ancienne configuration j'avais été obligée d'ajuster le DIV "header" qui se trouvait sous "languages" en mettant un margin-top de -50px pour que tout s'affiche bien avec FF et Opéra. Avec votre proposition, je remets la marge à 0.

Si j'ai bien compris ce que vous me dites et ce que j'ai lu auparavant, je dois préciser que "rap" est RELATIVE à cause du comportement "quirky" de IE7, c'est bien ça?

Par contre je pensais que les ABSOLUTE étaient complètement absolus et sortaient du flux des boites, et donc que leur positionnement était toujours fait par rapport à la fenêtre du navigateur. Là du coup je ne vois pas bien la différence entre ABSOLUTE et RELATIVE, mis à part que le premier se positionne à partir du coin top-left du contenant, et l'autre à partir du coin bottom-right. Ou est-ce que je n'ai toujours rien compris??

En tout cas merci pour votre aide!

Nadège
En gros, les calques sont absolus par rapport au calque qui les contient si celui-ci est en position relative. Sinon ils sont absolus par rapport à la fenêtre de navigateur...
Sinon, il est bien intéressant ton blog... et engagé, c'est rare... Smiley smile
Sujet clos
Aller à