Discussion :

[vbaguet]

Bonjour à tous,

Je souhaite que mon div conteneur soit centré horizontalement et verticalement.
J'utilise toujours la même méthode à savoir celle-ci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
#container {
	width: 980px;
	height: 540px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -490px; /* moitié de width */
	margin-top: -270px; /* moitié de height */
 
}

Le problème est que mon header qui se trouve dans le conteneur ne s'affiche pas correctement sur un iphone par exemple. En fait il ne s'affiche pas du tout.
Par exemple, rendez vous sur le site, et avec Chrome utiliser l'inspecteur d'élément, vous verrez le header ne s'affiche pas...
Je ne comprend pas le problème, peut-être saurez-vous m'aider !

Bien à vous,

Vincent

[rodolphebrd]

Le Header disparait en paysage en effet.

Il faut donc écrire les conditions nécessaires pour pallier cela à commencer par un viewport puis insérer les médias queries idoines.

[Candygirl]

Hello,

Je n'ai pas d'iphone pour visualiser ton problème.

Le centrage vertical à l'aide des marges négatives a toujours été à utiliser avec prudence, puisque, sans précaution, si la zone de visualisation est inférieure aux dimensions du site, une partie du contenu est invisible puisque en dehors de la zone de visualisation.

Pour éviter le problème une des parades était d'attribuer un min-with et min-height au body (pas efficace à l'époque pour IE6). Je ne sais pas si cela permet de résoudre le problème sur un iphone...

A l'heure actuelle j'opterais de toute manière plutôt par une solution avec un display:table-cell, bien plus souple à manier.