JoP Posté 11 Décembre 2009 Posté 11 Décembre 2009 Bonjour à tous! J'espère que vous allez tous bien! Voilà! J'aimerais centrer un <div> au centre de l'écran, et non de la page... J'ai beaucoup cherché sur google, mais sans succès.. et je vous avoue que je ne sais même pas si ca se fait uniquement en CSS ou bien si ca inclus l'usage de javascrit... J'aimerais bien avoir votre aide sur ce sujet, juste une direction à prendre.. Merci d'avance..
jcaron Posté 11 Décembre 2009 Posté 11 Décembre 2009 Je suppose que tu veux dire que tu veux le centrer dans la fenêtre :-) Pour ça, la solution "pur CSS" c'est de faire un div en position: fixed avec top, left, bottom et right à 0, et mettre dedans un deuxième div en position: absolute, aux dimensions voulues, avec des margin: auto et top, left, bottom et right à 0. <div style="position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: red; border: solid 1px black"> <div style="position: absolute; width: 400px; height: 300px; top:0; bottom:0; left:0; right: 0; margin: auto; background: blue; border: solid 1px black"> Blah </div> </div> Il y a peut-être plus simple, mais ça en tous cas ça marche. Attention: il faut que les dimensions de la boîte à centrer soient fixes, sinon ça ne marche pas. Jacques.
JoP Posté 16 Décembre 2009 Auteur Posté 16 Décembre 2009 Merci beaucoup!! C'est ce que je cherchais, mais j'aimerais, si c'est possible que le <div> ne suive pas le "scroll" de la page.. Merci encore!
captain_torche Posté 16 Décembre 2009 Posté 16 Décembre 2009 Il faut remplacer le position: fixed; par position: absolute;
JoP Posté 16 Décembre 2009 Auteur Posté 16 Décembre 2009 quand je change le position: fixed pour position: absolute, mon <div> se cale en haut de la page. Pour etre plus précit, mon <div> s'ouvre à l'aide d'une fonction javascript et j'aimerais que losrque le <div> est affiché, qu'il reste où il s'est ouvert et qu'il ne se déplace pas quand on scroll la page.. Merci encore
jcaron Posté 16 Décembre 2009 Posté 16 Décembre 2009 C'est ce que fait le code que je t'ai donné, non? Jacques.
JoP Posté 16 Décembre 2009 Auteur Posté 16 Décembre 2009 C'est ce que fait le code que je t'ai donné, non? Jacques. le code centre bien le <div> au milieu de la fenêtre, mais lorsque je scroll la page, le <div> suit (c'est a dire qu'il reste toujours au milieu de la fenêtre), et moi je voudrais qu'il reste toujours à la même place, c'est à dire qu'il ne bouge pas lors du scroll merci encore
jcaron Posté 17 Décembre 2009 Posté 17 Décembre 2009 Tu as bien gardé tous les bouts que j'ai donnés, en particulier le position: fixed sur le div externe? A part les background et color évidemment :-) Tu as bien ce code juste après le <body>? Ce n'est normalement pas indispensable, mais ça peut éviter des surprises. Tu as passé l'ensemble de ta page au validateur W3C pour vérifier qu'il n'y avait pas de problèmes de syntaxe qui pourraient affecter la mise en page? Avec le code que je t'ai donné, le div externe est forcément calé sur la fenêtre (c'est le but du position: fixed, par opposition à un position: absolute qui le calerait par rapport à la page), et le div interne est calé par rapport à ce div externe. J'ai testé ce code avec IE, FF et Opera et ça fait bien ce qui est prévu: le div interne ne bouge pas d'un poil quand tu scrolles. Jacques.
JoP Posté 19 Décembre 2009 Auteur Posté 19 Décembre 2009 j'ai gardé tout les bouts que tu m'as donnés. Mais ça ne fait pas ce que je veux. Lorsque je fais défiler la page, le div reste toujours au milieu de la fenêtre, c'est-à-dire que le contenu défile derrière le div, mais je voudrais que le div défile avec le contenu. Merci encore Jonathan
Sarc Posté 19 Décembre 2009 Posté 19 Décembre 2009 Tu n'as pas une version en ligne ? C'est tellement plus simple quand on a un exemple sous les yeux pour aider..
JoP Posté 19 Décembre 2009 Auteur Posté 19 Décembre 2009 oui, j'ai une version en ligne: Cliquez-ici! ne regardez pas trop le design, on ne fait que commencer.. pour voir le div que je suis en train de faire: descendez jusqu'à la section "vidéos" et cliquez sur "voir le vidéo" merci encore! Jonathan
Vontage Posté 21 Décembre 2009 Posté 21 Décembre 2009 Sinon, propriétés CSS toutes simples : - margin-left: auto; - margin-right: auto; Mais attention, pour qu'elles fonctionnent, l'élément en question doit avoir une largeur (width) spécifiée.
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant