Discussion :

[Oluha]

Salut

Je souhaite centrer verticalement et horizontalement mon conteneur dans ma page. Pour cela j'ai utilisé cette méthode qui fonctionne sous IE et FF :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 700px;
     height: 400px;
     margin-top: -200px; /* moitié de la hauteur */
     margin-left: -350px; /* moitié de la largeur */
     border: 1px solid #000;
     }

Le soucis arrive avec les petites résolutions.

Quand la fenêtre est trop petite pour le cadre on a bien les scrollbars, ce qui est nikel, par contre le haut et la partie gauche sont coupés

L'interface de mon site, faite à partir de la maquette du client, passe juste en 1024*768 après quelque arrachage de cheveux, par contre ceux qui sont en 800*600, outre le fait des scrollbars, auront le haut de mon conteneur coupé.

Vous allez me dire de travailler en % pour ne pas être emmerdée avec les résolutions, mais vu la tête de la maquette, ca risque d'être très difficile à faire
Vous pouvez éventuellement la voir ici : http://www.magnificat.com/us/produits_derives.htm

Ma question est donc : connaissez vous une autre façon de centrer une div, fonctionnelle sous IE et FF, et qui ne coupe pas le conteneur comme c'est le cas ici ?

Merci !

[masu]

je ne voi pas d'autres facon pour un centrage vertical que les marges négatives. Apres quelques tests je n'ai pas trouvé de solutions pour eviter que le haut soit rogné dan une fenetre trop petite.

Pour ce qui est du rignage harizontal on peu faire quelque chose du genre, pour l'éviter:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body {
	margin:0px;
	padding:0px;
}
#extradiv {
	width: 700px;
	height: 400px;
	margin: 0 auto;
}
#global {
	border: 1px solid black;
	position: absolute;
	width: 700px;
	height: 400px;
	top: 50%;
	/*left: 50%;*/
	margin-top:-202px !important; /*1/2 de height+padding+border*/
	margin-top:-200px; /*1/2 de height pour ie*/
	/*margin-left: -350px*/
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="extradiv">
<div id="global">dummy</div>
</div>

[Oluha]

zut c'était surtout le centrage verticale qui m'embêtait
et si j'en met pas sur les grandes résolutions ca fait franchement laid.

et puis entre mes <div> arrondis et mes images dans des calques qui passent par dessus, je me vois pas faire une mise en forme en %

A la limite faudrait détecter la résolution et charger un style différent au niveau du centrage de mon conteneur. Mais y'a pas d'autres moyens que de le faire en javascript si je ne m'abuse ?

[Candygirl]

Ma question est donc : connaissez vous une autre façon de centrer une div, fonctionnelle sous IE et FF, et qui ne coupe pas le conteneur comme c'est le cas ici ?

Merci !

Oui, un tableau 100% de haut avec une seule cellule
Perso, je trouve que c'est un des cas où le css ne présente pas de solution efficace actuellement. Donc, en attendant, plutôt que de se compliquer la vie...

Autrement pour le centrage horizontale je préfère le margin:auto aux marges négatives justement à cause du rognage possible sur petites fenêtres pouvant rendre le site totalement inaccessible lorsqu'on a une nav sur le côté.

[Oluha]

j'ai bien essayé mais j'arrive pas à faire cohabiter margin auto et centrage vertical. Pour le tableau ca me dit quand même moyen

[Oluha]

j'ai réglé temporairement avec une table à 100% comme on me l'a suggéré. Par contre si quelqu'un a quelque chose de plus propre à proposer, je suis tout ouie