18068 sujets

Questions générales et questions de débutants

Problème de centrage

Voila j'ai un site internet, www.gwada-mar-tours.com,

J'ai fait en sorte qu'il soit au milieu de ma page, en résolution : 1280x1020 sa marche très bien, mais quand je fait des test en 1024x768 mon site n'est plus du tout centre la partie du haut disparait.

si quelqu'un a une soluce,

merci d'avance

l'adresse du css : www.gwada-mar-tours.com/style.css
Modifié par ganjaaw (02 Sep 2006 - 20:55)
Bonsoir ganjaaw,
La meilleure solution serait peut-être de ne pas fixer la hauteur générale ni celle de la partie principale ( ça éviterait notamment de voir cette barre de défilement au milieu du design pour pas grand chose), et donc de ne pas centrer verticalement (pas très utile avec une hauteur si importante et ça pose des problèmes comme tu le constates).

Pour le centrage horizontal je verrais mieux l'utilisation des marges (cf. la première méthode du tuto sur le centrage).

C'est en tout cas ce que je ferais Smiley smile .
C'est sûr que 1280x1024, c'est un peu une résolution de brute. C'est la mienne, et d'ici quelques mois près d'un quart des internautes auront une résolution égale ou supérieure... mais un quart, c'est finalement très peu !

D'ailleurs, je n'ai pas compris l'histoire du centrage vertical en ouvrant la page. Il a fallu que je cache une ou deux barres d'outils pour voir apparaître un effet de centrage...

Sur la hauteur fixe/le centrage vertical d'un site :
- c'est ergonomiquement peu intéressant, voire perturbant pour l'utilisateur (« pourquoi est-ce que ce site a une barre de défilement interne au lieu d'utiliser la barre de défilement du navigateur, tout à droite, comme sur les autres sites ? ») ;
- le risque de double barre de défilement (internet ET externe) est grand... et là c'est assez catastrophique ;
- le centrage vertical ne devrait pas être tenté avec un design de plus de 450-500px de haut. Et encore, il me semble que un site de 500px de haut peut très bien ne pas passer en 800x600.

Je rejoins donc les suggestions d'Alan en tout point.
En passant, deux erreurs de conception :
#conteneur {
	position:absolute;
	width: 800px;
	left: 50%;
	margin-left: -400px;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
}

Si on calcule la largeur totale de ton bloc #conteneur, on a :
800px (largeur) + 1px (bordure gauche) + 1px (bordure droite) = 802px.
Or, la largeur disponible à l'intérieur de la fenêtre du navigateur pour un écran de 800x600 est de 770px environ, car il faut prendre en compte (au minimum) les bordures de la fenêtre et la barre de défilement. 760px est un bon choix. 770px si on a vraiment besoin d'un maximum de place. Je déconseille 780px (deux chances sur trois pour faire apparaître une barre de défilement horizontale inutile ?).

Deuxième erreur (pas bien méchante) : utiliser le positionnement absolu pour centrer un élément horizontalement est loin d'être la meilleure méthode disponible. Avec certains navigateurs (certes un peu anciens et représentant relativement peu de parts de marché), la marge négative ne prendra pas en compte, et la page sera décalée. Il est possible, avec ces navigateurs (utilisés surtout par des gens qui ont une machine ancienne, avec une résolution faible, par exemple 800x600...) qu'une partie importante du contenu ne soit pas visible à cause de cela.

Utiliser la technique des marges automatiques serait donc un plus pour cette mise en page, bien que pas forcément très « urgent » à régler.
Sujet clos
Aller à