28173 sujets

CSS et mise en forme, CSS3

[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 Smiley lol

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 Smiley bawling

y à t'il un moyen pour qu'un div en position absolute soit centrer? merci beaucoup Smiley cligne
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;
}
Administrateur
pikoo a écrit :
y à t'il un moyen pour qu'un div en position absolute soit centrer? merci beaucoup Smiley cligne

Hello et bienvenue,

Bah pourquoi donc qu'on se décarcasse à faire des tutoriels ? Smiley decu
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)
Déjà un grand merci à mikachu et Benjamin pour leur réponses! Je vais tester vos posibilitées et revenir poster Smiley smile

@Raphael

Il y a justement un petit problème avec les div relatives: pour fermer mon popup, il ne faut pas cliquer sur un bouton "ok" ou annuler ou un truc du genre, mais l'on peut cliquer sur tout le popup. Si je met toutefois une div relative, il prend en compte toute la div pour cliquer dessus et fermer (donc une bande a travers tout l'ecran Smiley decu )

ensuite j'ai lu un machin avec des div parent frêre et le reste de la famille mais il me semble qu'un div absolute est bien plus simple...

Quand même bonne chance dans ta lutte contre les poseur de questions imtenpestifs ^^ Smiley cligne
Voili voilà j'ai fait le test et le gagnant eeest.... Benjamin Smiley cligne

J'ai éssayer ta façon Mikachu mais elle ne fonctionne pas... Smiley decu

Voilà la manière qui fonctionne:


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


Je vais en faite encore vous mettre les autres scripts ça va je pense éclaircir un peut les choses:

le javascript:

function pop()
{
	var pop = document.getElementById('pop');
	if (pop) {pop.style.display = 'block';};
	if (pop) {pop.onclick = function() {this.style.display = 'none';};};
}

window.onload = pop;


et pour finir ma page html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Une popup accessible au chargement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<script type="text/javascript" src="popup_load.js"></script>

<style type="text/css">
<!--
@import url(style1.css);
-->
</style>
</head>
<body bgcolor="#0033FF">

<h1>Une "popup" accessible !</h1>
<p>Contenu général de la page.</p>


<center>
  <div id="pop"><img src="img/imagesteal.jpg"></div>
</center>

</body>
</html>


voila merci a tous! Smiley smile
a écrit :
J'ai éssayer ta façon Mikachu mais elle ne fonctionne pas... decu

Mmmh autant pour moi j'avais mis absolute alors qu'il fallait mettre en relative (comme l'a spécifié Raphael après moi). Smiley confused
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 Smiley cligne
Modifié par ALkyD (12 Mar 2007 - 11:33)
Salut !

y'a peut etre moyen d'utiliser une ancre ...
j'imagine que lorsque tu appelle ta 'popup div' tu fais un lien du type :
<a href="#" onclick="centerPopup(element)";>*mon liens*</a>


a la position de ta page ou tu veux que ta div s'ouvre centrée , tu colles une ancre de type 
<a name="ancre1" id="ancre1"></a>


et tu change ton lien comme suit :
<a href="[b]#ancre1[/b]" onclick="centerPopup(element)";>*mon liens*</a>


c'est pas parfait , ça decale toujours un peu l'ecran , mais ça evite de se repositionner a chaque clic.
Sujet clos
Aller à