11499 sujets

JavaScript, DOM et API Web HTML5

Centrer une div tout le temps (meme si on change la taille de fenetre)

salut,
centrer un div comment ? Verticalement horizontalement ? Et le code HTML associé ? Pour centrer un élément, on a pas besoin de javascript.
Pour l'info et juste pour l'info, pour appliquer une modification au redimensionnement de la fenêtre, tu dois appliquer une écoute sur l'objet "window" avec de l'évènement "resize".
Pour centrer une div horizontalement.


<body onload="contactPosition()">
	<div class="container">
		<div class="contact" id="contact">contenu de la div</div>
...


Je viens de revérifier le centrage en CSS, je viens de comprendre pourquoi je tente le JS : parce qu'en faisant margin 0 auto, ca marche, mais je veux ma div en position absolute.

Je vais eclairer les lanternes de ceux qui voudraient m'aider parce que tout ca parait peut etre un peu bizarre :
J'essaie de creer un formulaire de contact tout seul, sans plugin, et en meme temps d'apprendre les bases du Javascript (sans JQuery), quitte a essayer de recreer des fonctions deja presentes dans JQuery (comme detecter une classe CSS, etc).
Ce formulaire serait une div centree horizontalement et invisible (en fait, au dessus du body, avec un top -200px ou quelque chose du genre). En cliquant sur le lien "Contact", alors cette div descendrait depuis sa cachette au milieu de l'ecran.
Donc du coup, il y a JQuery, Javascript, mais maintenant aussi CSS3 qui permet des animations du genre, donc ca devient un peu confus quant a la methode a preferer.

Merci =)

Edit: bon, en fait j'ai trouve...

http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div
Il faut une div en position absolute et left 50%qui soit parent de notre div qui elle sera en position relative avec un left -50%
Modifié par LightBen (17 Sep 2013 - 14:00)
Administrateur
LightBen a écrit :
Pour centrer une div horizontalement.

Hello,

Pour centrer uniquement horizontalement, il faut surtout éviter l'usine à gaz du positionnement absolu.

Les marges automatiques suffisent amplement : http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

EDIT : euh OK excuse moi j'ai répondu trop vite. Pas vu que tu voulais absolument de l'absolu
Modifié par Raphael (17 Sep 2013 - 14:09)
Bon, en fait ca marche pas si bien que ca.

Probleme : j'essaie de faire ca en responsive...

Le container (invisible) est present, et sur un mobile ca nous fait donc une scrollbar avec apres, du vide.
Mon cerveau est completement vidé là du coup...

Je reformule le problème complet :
Comment faire une div, centree horizontalement et verticalement, et adaptee pour du responsive, en utilisant positionnement absolu ?

J'etais parti sur du JS au debut, mais ce n'etait pas calcule en fonction de la taille de la fenetre.
Puis, au lieu de partir comme conseille sur une recherche sur du windows resize j'ai cru qu'en CSS c'etait possible donc j'ai tente plein de trucs avec des containers, des position absolute, relative, left 50% et tout le b*****, mais ca marche pas.

Quand je parle de responsive, je veux dire que la div devrait faire genre 500px de largeur maximale, mais des que la fenetre (ou l'appareil utilisé, peu importe) atteint 500px et moins, alors la div fait 100% de largeur.

Devrais-je repartir sur la piste du JS avec le windows resize ?

Merci (et desole d'etre si complique quand je pose un probleme)
Modifié par LightBen (17 Sep 2013 - 14:54)
Si tu connais les dimensions de ton formulaire, tu dois appliquer à l'élément en position absolue un margin-top négatif égal à la moitié de sa hauteur et un margin-left négatif aussi, égal à la moitié de sa largeur et lui appliquer un "top:50%" "left:50%".

div {width:200px;height:100px;margin -50px 0 0 -100px;top:50%;left:50%}


Si tu ne connais pas les dimensions de ton formulaire, tu remet le même code CSS sans le "margin" et tu ajoutes les marges en JS en calculant ses dimensions, toujours en JS.

EDIT: je n'ai pas lu ta partie responsive, voila en gros un code plus complet


div {position:absolute;width:500px;height:200px;margin:-100px 0 0 -250px;top:50%;left:50%;background:red;}
@media screen and (max-width:500px) {
	div {width:100%;margin-left:0;left:0;}
}

Modifié par Zelalsan (17 Sep 2013 - 15:34)
Apparemment... ca marche =)

Merci beaucoup =)

Je vais faire une pause, avec tous ces calculs mon cerveau est mort (ok il en faut pas beaucoup...)
Sujet clos
Aller à