nanoum.net, intégration html/xhtml, css, javascript

css

derniers articles

archives

syndication rss

Centrer un site, y compris sous ie macmercredi 15 mars 2006

Pour centrer un site en hauteur/largeur, la technique la plus répandue est de positionner le bloc conteneur en absolu, avec top et left à 50% et d'utiliser des marges négatives : Centrer les elements ou un site web en CSS.
Le problème de cette technique est qu'elle n'est pas compatible avec Internet Explorer Mac (la moitié du site sort du haut de l'écran).

Le code utilisé donne ceci par exemple pour un site faisant 600px*400px :
#page {
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
width:600px;
height:400px;
}

Il ne manque ici pas grand chose pour que cela s'affiche correctement sur ie mac.

Si l'on remplace position: absolute par position: fixed, la page ne pose plus de problème sur mac.

Elle en posera cependant sur Internet Explorer pc ou Opéra.

On peut alors définir deux fois la propriété position pour que chaque navigateur interpéte celle qui lui convient.

On aura donc :
#page {
position:fixed !important;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
width:600px;
height:400px;
}

voir la page d'exemple

Testé et affiché correctement sous :
ie 5.0/5.5/6/7beta pc
ie 5.2 mac
firefox 1.07/1.5
safari 2
netscape 7.02
opéra 7.54/8.5
konqueror 3.3

Commentaires momentanément fermés. Merci de votre compréhension.