<C²: webløg />

Courriel - email address

Avatar Bleizig

mercredi 02 juillet 2003
par Bleizig

Positionner un div au centre de la page

Qui n'a pas eu besoin d'avoir un jour à positionner un [div] au centre d'une page, que ce soit horizontalement ou verticalement, le tout en respectant un design sans tables et en tirant parti le plus possible des fonctionnalités du CSS ? Pour ce qui est d'aligner horizontalement au centre, les exemples ne manquent pas mais verticalement, ils se font soudainement plus rares et le plus souvent ne marchent que sous MSIE (comme en utilisant une table avec les proprietes height="100%", width="100%" et les style align: center et vertical-align: middle).

Jusqu'à maintenant, j'avais toujours trouvé un moyen pour contourner le problème en me faisant une raison et en changeant mon design. Ce problème m'est encore retombé dessus récemment et au hasard de la navigation, je suis tombé sur la formule magique que j'attendais depuis si longtemps, gracieuseté de BlueRobot. La solution réside tout simplement dans l'utilisation de marges négatives :

Il suffit de déclarer l'élément à exactement 50% de la gauche ou du haut et de lui appliquer une marge gauche/haute de la moitié de sa longueur/largeur (plus la taille de la bordure) ... et ainsi le tout se retrouve magiquement au centre. Un exemple plus concret se trouve ici.

J'ai testé cette solution sur notre cher oiseau de feu 0.6, puis Netscape 7.02, Mozilla 1.4 et finalement Billou 6.0 et tout marche à merveille. Si les utilisateurs de Mac, Opéra pouvaient me confirmer que tout fonctionne correctement de leur côté ... merci d'avance. J'ai ensuite décidé de jouer un peu en alignant mon div dans un coin et à un quart du haut et de la droite (exemple 2), j'ai aussi positionné un div dans un coin d'un autre div (exemple 3) : les résultats sont très encourageants. Finis donc tous ces problèmes de centrage, les marges négatives sont la solution ultime!

Une toute légère ombre au tableau, il semblerait que MSIE ne considère pas la bordure d'un div comme faisant partie de sa longueur alors que Mozilla le fait ce qui fait que vous pouvez voir sur l'exemple 3, une toute petite différence de positionnement... peut-être qu'une autre formule magique tombera un jour !

En espérant que ça rendra service à plusieurs...

Bleizig | 2003.07.02 @ 18:01

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2003.07.02 @ 20:59 par Pierre

Bravo! Super trouvaille!

Ça fonctionne bien dans Safari 1.0

Ça fonctionne horizontalement mais pas verticalement dans MSIE 5.1.2 (mac): la boîte est à -50% du top.

Ça fonctionne dans Opera 6 mais le texte à l'intérieur de la boîte est décalé vers le bas, faudrait faire des tests pour voir si ce bug est contournable.

Quant aux exemples 2 et 3, tu pourrais placé tes DIVs avec right et bottom:

#contenu2 {
position:absolute;
width:300px;
height:240px;
right:0;
bottom:0;
}

mais je n'ai pas testé ce que ça donne.

Haut retour au début de la page

2003.07.02 @ 21:37 par tetsuo

aie!
le systeme des marges négatives posent de gros souci lorsque l'on reduit la fenetre ... l'ascenseur ne permet ke de parcourir que partiellement la page et toute une partie reste masqués ... ( c d'ailleur pour ca ke j'ai abandonné cette technique ) ...
les exemple 2 et 3 sont rognés en 800x600 (moz1.4).

l'etrangeté c ke 'margin:auto' permet de centrer un <div> horizontalement ( ce qui semble logique ) et pas verticalement !

sinon cela 'fonctionne' sous Opera 7.x ...

Haut retour au début de la page

2003.07.02 @ 22:33 par Bleizig

Et mince, moi qui pensait que c'etait un systeme infaillible ;-)

Il est vrai que ca ne peut etre utilisable que sur des div de dimensions assez petites.

Par contre, il est toujours possible d'utiliser la methode suivante pour les plus gros div (par contre on perd l'avantage d'avoir une hauteur et largeur fixe):

* position:absolute;
* left:35%;
* top:30%;
* width:30%;
* height:40%;

Merci à tous les deux d'avoir pris le temps de tester tout ca sur IE Mac, Safari et Opera ;-)

Haut retour au début de la page

2003.07.03 @ 03:23 par greut

> il semblerait que MSIE ne considère pas la bordure d'un div comme faisant partie de sa longueur alors que Mozilla le fait.

C'est plutôt l'inverse, non ? La norme indique que width est la largeur du contenu, alors que Billou 6 (comme tu dis) prend en compte width + padding + border.

http://www.w3.org/TR/css3...

Il est facile de faire la confusion, truc mnémotechnique : 'ie est le plus logique visuellement' hélas.

dans le même ordre d'idée : http://openweb.eu.org/art...

p.s.: rhââ, un bug avec un url (dans le preview en tout cas)

Haut retour au début de la page

2003.07.03 @ 07:30 par Pierre

À propos des largeurs de boîtes: MSIE 6 utilise le bon 'box model', c'est à dire que la largeur définie par un width s'applique au content, le padding et le border étant à part.
Seul MSIE 5.0 et 5.5 calculent la largeur comme étant content+padding+border.

Par contre, en MSIE 6, si votre page :
a) ne contient pas de doctype
b) contient un doctype incomplet (pas d'URL)
c) contient un doctype complet et un prolog xml (XHTML)
MSIE 6 tombe en quirk mode (au lieu du standard mode) et paf, on retrouve la bonne vieille merde de MSIE 5.x

Et comme Denis ne fait rien comme les autres ;-) il n'a fait aucune des erreurs que j'ai mentionné MAIS il a mis un commentaire html au début de son fichier, ce qui revient au même que mettre un prolog xml...

Ah! Les joies du CSS! ;-)

Haut retour au début de la page

2003.07.03 @ 16:09 par Gérard-André

Utilisateur du navigateur Opera 6.05, dans un écran 800x600, je confirme que les trois examples se retrouve bien aux positions recherchés par la programmation. Toutefois, dans l'exemple 1 et malgré que la (magnifique) mouette se trouve bien au bas de l'encadrement, à droite, le texte lui, démarre au mileu horizontal de ce même encadrement et le déborde vers le bas.

La situation ne s'améliore pas avec l'exemple 2. Dans le coin supérieur gauche, le texte déborde aussi de l'encadrement mais après avoir débuté au 2/3 du bord supérieur de l'encadrement tandis que le texte du cadre inférieur droit est tout à l'extérieur de celui-ci.

Enfin, dans le dernier exemple, j'ai compris que je dois passer à un version supérieure de mon navigateur (sic!). Le cadre au fond bleu, au lieu de se trouver au bas, à droite, faisant coin droit avec le cadre au fond blanc, se retrouve tout juste en surimpression du cadre au fond blanc en débordant vers le bas mais en gardant le phare dans son propre coin droit. Quant au texte du contenu1, il se trouve au milieu horizontal de sa boîte mais le texte du contenu2 est hors du cadre2. Dans tous les exemples, le texte respecte la marge de gauche.

Haut retour au début de la page

2003.10.23 @ 20:33 par dbltm

j'ai peut-être une soluce pour vous...
J'ai découvert recemment que en utilisant un cadre en L:100% et en H:100%, il y a moyen de mettre dessus un valign et un align...
Ceci agi de même façon qu'un calque...

Haut retour au début de la page

2003.10.24 @ 09:54 par Bleizig

Par cadre, tu veux dire une cellule de tableau ou un simple <div>?
Dans le premier cas, cela irait contre le design sans table et dans le deuxieme cas, je ne pense pas que le 'valign' ou 'vertical-align' soient standards pour un div.
Si tu pensais a autre chose, je serais curieux de savoir ce que c'est ;-)

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)