Centrage d'une page partiellement réussi

Bonjour

J'utilise un code pour centrer une page web qui marche très bien sur IE 7, MF 3 et aussi Chrome 0.3. Mais je me rends compte qu'il n'est pas infaillible. Si on a ajouté une bar d'outils, ou si on ouvre un panneau sur le côté, ces éléments ajoutés cachent une partie de la page, et plus on ajoute, plus la page est cachée. Voici le code en question qui provient, d'ailleurs, d'Alsacréations:

div#page {
	position:fixed !important;
	border: 0.01em black solid;
	position:absolute; 
	top:23%;
	left:50%;
	margin-top:-12%;
	margin-left:-490px;
	width:960px; 
	height:590px;
	background-color:black;
	overflow:auto;
}

Voici un exemple d'un site où je me suis servi de ce code: http://www.e-sprogcenter.dk

Bien sûre, si on enleve ces éléments, la page est montrée sans problème et en accordance avec ce code. Par contre, une page web sans ce code s'dapte à la place disponible en fonction des panneaux et des bar d'outils.

Est-ce qu'il y a une solution, ou faut'il laisser tomber ce joli code, ou faut-ti se dire qu'il n'existe pas de solution parfaite, et que tout a un prix?

J'espère que ma question sera vue comme un défi!

Salutations,

Jansoz
Modifié par 6l20 (11 Oct 2008 - 15:07)

Bonjour jansoz,

Il y a beaucoup plus simple et efficace pour centrer une page avec les marges latérales automatiques par exemple, cet article devrait t'en apprendre un peu plus :

Centrer les elements ou un site web en CSS

En l'occurence ton code me semble un poil casse gueu... position fixe, absolue, marges négatives...je ne l'utiliserai ps personnellement

Cdt,
Sylvain

Bonjour jansoz,

Plusieurs grosses erreurs dans ton code.

Premièrement, le centrage vertical avec un top: 23% et un margin-top: -12%, pour un bloc de hauteur fixe (590px), c'est du grand n'importe quoi. Ça ne peut marcher que pour une hauteur de fenêtre donnée, donc autant dire que ça ne marche pas. À oublier.

Deuxièmement, le centrage avec le positionnement absolu et une marge négative, c'est pas bien. Du tout. À oublier aussi. Les marges automatiques, par contre, c'est bien. Donc on récapitule: marges automatiques = bien, positionnement absolu = pas bien. Voilà.
(La raison: le centrage avec le positionnement absolu et des marges négatives risque de faire disparaitre des parties du site «hors-champ» si la fenêtre du navigateur n'est pas assez grande.)

Troisièmement, utiliser le positionnement fixe ici est une erreur. Ça démultiplie les effets pervers du centrage avec les marges négatives, car l'utilisation du positionnement fixe fait qu'on n'aura jamais de barre de défilement pour voir le contenu caché (et que même si c'était le cas ça ne changerait rien, car le conteneur resterait exactement à la même place visuellement parlant).

Enfin, un design de largeur fixe en pixels, ça va. Mais un design de hauteur fixe, en général c'est une bêtise. Les contenus, ça a une taille variable (beaucoup plus que l'on ne le croit). Pour 99% des sites, il faudra assurer l'extensibilité en hauteur du design. Ce qui n'empêche pas un centrage vertical si jamais le conteneur global a une hauteur plus réduite que celle du viewport (zone de visualisation du navigateur).

Je pense que l'article suivant devrait t'intéresser:
http://web.covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html
(Je pense qu'il est plus précis que le tutoriel sur Alsacréations, mais comme je l'ai écrit je ne suis absolument pas objectif. )

Bonjour Sylvain,

J'ai suivi ton lien,

Centrer les elements ou un site web en CSS

et ce lien donne le même code que je mets en question.

En l'occurence ton code me semble un poil casse gueu... position fixe, absolue, marges négatives...je ne l'utiliserai ps personnellement

Mais merci quand même!

Qdt,

Jansoz

Et merci aussi à Florent!

Florent V. a écrit :
Bonjour jansoz,

Plusieurs grosses erreurs dans ton code.

Premièrement, le centrage vertical avec un top: 23% et un margin-top: -12%, pour un bloc de hauteur fixe (590px), c'est du grand n'importe quoi. Ça ne peut marcher que pour une hauteur de fenêtre donnée, donc autant dire que ça ne marche pas. À oublier.

Deuxièmement, le centrage avec le positionnement absolu et une marge négative, c'est pas bien. Du tout. À oublier aussi. Les marges automatiques, par contre, c'est bien. Donc on récapitule: marges automatiques = bien, positionnement absolu = pas bien. Voilà.
(La raison: le centrage avec le positionnement absolu et des marges négatives risque de faire disparaitre des parties du site «hors-champ» si la fenêtre du navigateur n'est pas assez grande.)

Troisièmement, utiliser le positionnement fixe ici est une erreur. Ça démultiplie les effets pervers du centrage avec les marges négatives, car l'utilisation du positionnement fixe fait qu'on n'aura jamais de barre de défilement pour voir le contenu caché (et que même si c'était le cas ça ne changerait rien, car le conteneur resterait exactement à la même place visuellement parlant).

Enfin, un design de largeur fixe en pixels, ça va. Mais un design de hauteur fixe, en général c'est une bêtise. Les contenus, ça a une taille variable (beaucoup plus que l'on ne le croit). Pour 99% des sites, il faudra assurer l'extensibilité en hauteur du design. Ce qui n'empêche pas un centrage vertical si jamais le conteneur global a une hauteur plus réduite que celle du viewport (zone de visualisation du navigateur).

Je pense que l'article suivant devrait t'intéresser:
http://web.covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html
(Je pense qu'il est plus précis que le tutoriel sur Alsacréations, mais comme je l'ai écrit je ne suis absolument pas objectif. )