28172 sujets

CSS et mise en forme, CSS3

Alignement vertical et disparition de contenu

Salut à tous.
J'ai un site web à taille fixe que je souhaite centrer horizontalement et verticalement. Pour le centrage vertical j'ai utilisé le bien connu hack des margin négatifs. Mon problème cependant, si l'on considère que mon site fait 1000px en hauteur, est que les petits écrans (par exemple 1024*768) voient le haut et le bas du contenu coupés. Vous pouvez voir les images ci-dessous montrant un écran de grande résolution et un autre de petite résolution.
Je ne sais pas si je suis clair, n'hésitez pas à me redemander si ce n'est pas le cas.
Mon CSS pour le moment est celui-ci :
body{
}

#body{	
	position:absolute;
	top:50%;
	left:0px;
	width:100%;
	text-align: center;
	margin-top:-350px;
	min-width:1000px;
}

#subbody{
	position: relative;
	text-align: left;
	width:1000px;
	height:700px;	
	margin:0px auto;
	border:1px #000 solid;
}

Où là balise body est parente du div #body, lui même parent du div #subbody.
J'ai cherché quelques pages qui pourraient m'aider sur internet, la seule intéressante est celle-ci mais elle ne corrige le problème que horizontalement.
http://azmeuk.fr/upload/thumbs/grand.png http://azmeuk.fr/upload/thumbs/petit.png
Merci pour votre aide
Modifié par azmeuk (25 Aug 2009 - 12:59)
bonjour,

C'est le defaut connue des marges negatives ... que tu peut eviter en donnant au conteneur parent une hauteur et largeur minimale , Ce conteneur doit etre dans le flux Ces dimensions doivent etre equivalente a l'element en taille fixe que tu veut centrer (taille connue si l'on applique la technique du centrage en absolue et marge négatives) .

Pour IE 6 , si tu veut aussi y corriger ce defaut , il faut en passer par une marge interne sur html par exemple ...
Via les commentaires conditionnels et pour un conteneur de 800 X 300 pixels :

<!--[if  lte IE 6 ]>
<style>
html {padding:125px 400px;}
</style>
<![ endif ]-->


http://yidille.free.fr/plux/valign/?10-5-pistes-pour-centrer-en-xy-vos-pages#negative-margin-no-bug (page testant 5 approches) et le gabarit test qui va avec :
http://yidille.free.fr/plux/valign/uploads/centre-position-absolute-marge-negatives.html

Perso , je ne suis pas fan des marges négatives et le seul truc qui tienne la route pour le moment est un tableau d'une cellule comme conteneur principal de la page .

GC
Sujet clos
Aller à