28172 sujets

CSS et mise en forme, CSS3

[Resolu] Centrer une lightbox dans l'élément parent

Bonsoir,

J'ai un soucis avec mes lightbox. Elles doivent se placer au centre de ma page (balise html). or se n'est pas le cas, elles se centrent dans l'élément qui la contient (div, article, nav, ...).
Je ne sais pas comment faire pour lui dire de se centrer par rapport à l'elément parent à savoir "html".
Pouvez-vous m'aiguiller?

Pour être plus clair, cliquez sur une vignette de la galerie photo sur http://www.wuotai.com

Merci Smiley cligne

Édit : La lightbox que j'ai utilisée est nommée "Lightbox évolution".
Modifié par folvool (05 Jan 2011 - 23:09)
J'ai également le même problème en cliquant sur lettre d'info ou sur administration. Je ne comprends pas pourquoi car mes différents liens ne sont pas dans le même élément.
Une petite idée? Smiley smile
Bonjour,

Réaction tout à fait normale. Ta lightbox se positionne par rapport a ton body qui à une taille fixe et qui est centré dans ta page ce qui fausse tout le calcul JS de centrage de ta lightbox ( la preuve, si tu réduit ta fenêtre de navigateur pour coller avec les bords de ton bloc principal, la lightbox sera bien centrée).

Je ne connais pas le fonctionnement de ton script de lightbox mais je pense qu'il utilise la balise body comme parent pour se positionner.

Je sais pas si tu me suis mais il suffit donc que tu ajoute un div après ta balise body par exemple :

<body>
<div id="wrapper">ici le code de ta page</div>
<div id="jquery-lightbox-move">Ce div s'affiche automatiquement grâce au script de ta lightbox</div>
</body>


puis le CSS suivant, à la place de l'attribuer à ton body, tu l'attribue au div "wrapper" :


#wrapper {
-moz-border-radius: 10px 10px 10px 10px;
margin: 10px auto;
padding: 0;
position: relative;
width: 1024px;
}


Ça devrait résoudre ton problème. Smiley cligne

PS : Je te conseil de toujours passer par un div enfant du body pour le positionner et centrer ton contenu et de ne jamais positionner ta balise body ou lui donner une largeur fixe, pour moi un body doit toujours faire 100% de la taille de la fenêtre de ton navigateur.
Modifié par Spacedementia (05 Jan 2011 - 23:03)
bonsoir,

Je viens de voir ta réponse et j'ai teste la petite modif depuis mon mobile.
Surprise, ca marche bien évidemment.

je n'avais pas pense que ca puisse venir du body.

c'est évident, mais fallait sortir la tête du script.

Bonne soirée a tous.
Smiley cligne
Heureux d'avoir pu t'aider. C'est clair, des fois si ça bloque de trop il faut savoir décrocher de son code pendant un petit moment. Et en revenant sur un problème plusieurs heures ou jours après en générale on trouve la solution (et oui le cerveau, inconsciemment continu à réfléchir au problème et trouve parfois des pistes tout seul). Smiley cligne
Bonjour,

Je suis débutant dans la matière et j'ai moi aussiun probléme avec le centrage de ma Lightbox.

J'ai bien lus le comentaire qui contient la réponse, mais je ne sais pas comment m'y prendre.

Je cite:
<body>
<div id="wrapper">ici le code de ta page</div>
<div id="jquery-lightbox-move">Ce div s'affiche automatiquement grâce au script de ta lightbox</div>
</body>

et


#wrapper {
-moz-border-radius: 10px 10px 10px 10px;
margin: 10px auto;
padding: 0;
position: relative;
width: 1024px;
}

Pour le CSS je pense que j'ai compris, mais ce que je dois taper dans le body m'échape un peu.
J'aimerais si possible et si vous le voulais bien sur, avoir quelques information et directifs sur la façon de proccéder. Merci bien.

Cordialement, Fenrir.
Sujet clos
Aller à