Problème pour centrer un site web

Salut,

J'ai suivi le tutorial pour centrer horizontalement et verticalement un site web et ça fonctionne parfaitement avec un site en 800x600, en revanche mon site lui devra faire 1000x450 pixels. J'ai testé avec ce css :

#global {
     position:absolute;
     left: 50%; 
     top: 50%;
     width: 1000px;
     height: 450px;
     margin-top: -225px; 
     margin-left: -500px; 
     }

lorsque je test l'affichage en 800x600, je n'ai aucune barre de défilement horizontale, le site est centrer mais à gauche et à droite on a une partie inaccessible.

Quelqu'un aurait-il une idée pour contourner ce problème ?

Merci
[code]

Hello,

Je crois que tu n'as pas bien suivi le tutoriel justement.

Voici ce que tu as dû lire trop vite :

a écrit :
Préambule : Les marges négatives verticales en CSS posent des problèmes sur Explorer Mac ainsi que divers problèmes lors du redimensionnement de la page (bords mangés, pas de barre de défilement horizontal quand on réduit la page, etc.). Il est donc fortement conseillé d'éviter cette méthode sauf si vous en maîtrisez les conséquences.

Ce qui vaut pour les marges verticales, vaut évidemment pour les marges horizontales.
Modifié par Raphael (03 May 2007 - 17:24)

Merci Raphael,

Si dans ce cas j'utilise le css suivant pour centrer horizontalement (et éviter le problème rencontré avec les marges négatives) :

#global {
	width: 1000px;
	margin: 0 auto;
	height: 450px;
	     }

que dois-je rajouter pour centrer verticalement ?

Merci

Salut,

pour le centrage vertical, il faut utiliser les marges négatives, ou un tableau à une seule cellule et la propriété vertical-align: middle.

Thomas D. a écrit :
Salut,

pour le centrage vertical, il faut utiliser les marges négatives, ou un tableau à une seule cellule et la propriété vertical-align: middle.

... Comme cela est décrit dans le tutoriel d'ailleurs

a écrit :
La technique des marges négatives permet de centrer un bloc dont on connait les dimensions (pour centrer des éléments non-blocs comme des textes, il est préférable de suivre la Foire Aux Questions (FAQ) et de ne pas utiliser la méthode des marges négatives décrite ici).

a écrit :
La technique des marges négatives permet de centrer un bloc dont on connait les dimensions.

En effet, mais un problème se pose : l'agrandissement du texte par le visiteur ...

yodaswii a écrit :
La technique des marges négatives permet de centrer un bloc dont on connait les dimensions.

En effet, mais un problème se pose : l'agrandissement du texte par le visiteur ...
Oui, c'est un peu ce qui a été signalé quelques posts plus haut, non ?

a écrit :
Préambule : Les marges négatives verticales en CSS posent des problèmes sur Explorer Mac ainsi que divers problèmes lors du redimensionnement de la page (bords mangés, pas de barre de défilement horizontal quand on réduit la page, etc.). Il est donc fortement conseillé d'éviter cette méthode sauf si vous en maîtrisez les conséquences.

Désolé, posté un peu vite .

Mais de ce fait, ne vaut-il pas mieux bannir l'utilisation des marges négatives ?

Parce que je vois mal comment on pourrait :

a écrit :
en maîtrisez les conséquences.

A moins que le contenu de ce bloc soit par exemple une image dont les dimensions sont connues ...
Modifié par yodaswii (03 May 2007 - 18:07)

yodaswii a écrit :

Mais de ce fait, ne vaut-il pas mieux bannir l'utilisation des marges négatives ?

Très bonne question.

Doit-on conserver cette partie en expliquant très clairement, avec du gras et tout, que c'est à déconseiller ?
Ou doit-on la supprimer, en laissant à d'autres sites web le privilège d'en parler, voire de la conseiller ?

Merci à tous pour vos réponses.

Je vais opter pour la solution du tableau avec une cellule et vertical-align: middle

Merci encore

J'ai utilisé quelque fois cette technique et je pense que vraiment ormis si le contenu est une image (donc les dimensions du bloc connues) cette technique ne devrait jamais être utilisée mais de la à dire qu'il faut la supprimer il n'y a qu'un pas .
Modifié par yodaswii (03 May 2007 - 18:18)

Salut,

on peut aussi utiliser une hauteur en pourcentage avec un overflow auto, c'est possible à centrer verticalement dans ce cas. Aucun intérêt particulier par rapport à la cellule de tableau mais c'est intéressant à savoir.