[résolu] Centrer une div absolute?

Bonjour communauté de Alsacréations,

Avant de vous expliquer mon problème proprement dit je vais vous éclairsir sur les raisons de ce problème justement

Donc voilà, afin de contourner ces *!+§*# de popup blocker j'ai trouver un moyen d'afficher le popup en position absolute sur la même page.

Seulement maintenant j'ai mon popup positioner d'après ce que j'ai mis dans mon div:

#pop {
display: none;
top :100px;
left: 50px;
position:absolute;
}

donc a 100px du haut et 50 px de la gauche... Mais moi c'est au milieu de la page que je veut mon popup

y à t'il un moyen pour qu'un div en position absolute soit centrer? merci beaucoup
Modifié par pikoo (11 Dec 2006 - 14:14)

Salut,

Il te suffit de lui spécifier une largeur et de mettre les marges automatiques.
par exemple

#pop {
width: 200px;
display: none;
top: 100px;
margin: 0 auto;
position:absolute;
}

pikoo a écrit :
y à t'il un moyen pour qu'un div en position absolute soit centrer? merci beaucoup

Hello et bienvenue,

Bah pourquoi donc qu'on se décarcasse à faire des tutoriels ?

tutoriel sur le centrage a écrit :
Cas des éléments positionnés.

Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative", la technique des marges latérales automatiques ne fonctionne pas par défaut.

En effet, si votre conteneur est placé dans le flux (avec des marges) et que votre contenu est positionné (absolu ou relatif), ce dernier sort du flux et donc du conteneur. Il se placera alors par rapport au dernier parent positionné : le document.

Pour éviter ce problème, il faut absolument que le conteneur soit lui-même positionné. En lui donnant une position relative, vous pouvez garder son centrage avec marges automatiques, tout en incorporant du contenu lui aussi positionné.

Modifié par Raphael (11 Dec 2006 - 13:35)

Bonjour,

Un petit tour par ici pourrait t'être utile je pense


edit: urgh, grillé
Modifié par Benjamin D.C. (11 Dec 2006 - 13:36)

Salut,

Pour éviter d'ouvrir un nouveau sujet, je poste à la fin de ce topic qui décrit parfaitement le problème que je rencontre : le centrage d'une div en absolute.

Pour simplifier, j'ai donc une page avec un lien dedant qui permet d'ouvrir une pop-up en div (et non une pop-up JS). Par défaut, la pop-up a un display: none, quand je clique sur le lien ça passe à display: block et quand je ferme la pop-up ça repasse en display: none. Jusque là, rien de sorcier.

Le seul problème que je rencontre, c'est pour centrer la pop au milieu de ma page, et ce, quelque soit le défilement de ma page (avec les scrollbars).

Les diverses solutions proposées par Alsacreations comme par exemple :

position:absolute;
left: 50%;
top: 50%;
width: 326px;
height: 118px;
margin-top: -59px;
margin-left: -163px;
display: none;

fonctionnent... lorsque la page est tout en haut. Si cette page fait disons 3000 px de hauteur, que je fais défiler cette page tout en bas et que j'appelle mon popup avec le code CSS ci-dessus, la popup apparaîtra tout en haut de la page, et donc ne s'affichera pas à l'écran...

J'ai essayé une tonne de solutions Javascript dont

function centerPopup(element) 
{
	var height = element.offsetHeight;		// Hauteur de l'élément à positionner
	var width = element.offsetWidth;		// Largeur de l'élément à positionner
	var myParent = element.parentNode;
	var pHeight = myParent.offsetHeight;	// Hauteur de l'élément parent
	var pWidth = myParent.offsetWidth;		// Largeur de l'élément parent
	var sTop = myParent.scrollTop;			// Hauteur de défilement de l'élément parent
	var sLeft = myParent.scrollLeft;		// Longueur de défilement de l'élément parent
	var posY = (pHeight / 2) - (height / 2) + sTop;		// Calcul de la position en Y
	var posX = (pWidth / 2) - (width / 2) + sLeft;		// Calcul de la position en X
	
	element.style.position = 'absolute'
	element.style.top = posY + "px";
	element.style.left = posX + "px";
}

(trouvé sur un autre topic traitant du même sujet), ca marche pas, que ce soit IE 7 ou FF. J'ai essayé des solutions utilisant le clientHeight/Width et offsetHeight/Width mais ces variables restent désespérément vides...

Ma pop-up a des dimensions prédéfinies et est de ce genre-là :

<div id="popup">blablabla...</div>

et son élément parent est <body>.

Quelqu'un a-t-il une solution ?

Merci
Modifié par ALkyD (12 Mar 2007 - 11:33)