Dépassement du navigateur pour une div centrée en hauteur et largeur

Bonjour tous le monde,

Voici mon tout premier post sur ce forum. Je suis débutant en web et me voilà confronté à un petit problème. J'ai une div de 700 par 600px centrée à l'aide des marges négative en CSS.

#content {
position:absolute;
top:50%;
margin-top: -300px; /* moitié de la hauteur */
left:50%;
margin-left:-350px;
width:700px;
height:600px;
z-index:1;
}

Mon problème est que si un utilisateur à un écran trop petit, la div dépassera en bas et SURTOUT EN HAUT de la fenêtre du navigateur. En bas ce n'est pas embêtant mais en haut, énormément.

Existe t-il une solution pour "bloquer" cette DIV une fois arrivée à la limite haute de ma fenêtre navigateur ?

Merci d'avance.

FrankyChat

frankyc a écrit :
Mon problème est que si un utilisateur à un écran trop petit, la div dépassera en bas et SURTOUT EN HAUT de la fenêtre du navigateur. En bas ce n'est pas embêtant mais en haut, énormément.

Voilà pourquoi cette technique est fortement déconseillée.

frankyc a écrit :
Existe t-il une solution pour "bloquer" cette DIV une fois arrivée à la limite haute de ma fenêtre navigateur ?

Réponse courte: non.
(Réponse longue: ça pourrait éventuellement être fait en JavaScript, mais il y a des failles.)

Suggestions pour la suite:
1. Faire le centrage horizontal avec la technique des marges automatiques.
2. NE PAS FIGER LA HAUTEUR DU SITE. C'est pas bien.
3. Si besoin de centrage vertical, voir par ici: http://covertprestige.info/test/39-centrage-bloc-vertical-horizontal.html

Merci beaucoup pour la réponse, je vais voir sa ...

Merci beaucoup celà fonctionne impecable.

frankyc a écrit :
Merci beaucoup cela fonctionne impeccable.

Sujet [résolu] donc ?
(Pense également à mettre en forme le code que tu présentes sur le forum, s'il te plait )

Cdt,
Sylvain

Florent V. a écrit :

Réponse courte: non.
(Réponse longue: ça pourrait éventuellement être fait en JavaScript, mais il y a des failles.)

?? , cette technique impose de dimensionné le conteneur a centré et je ne vois pas ou est le probleme d'imposer un min-width et un min-height a body en même temps ... pas besoin de javascript.

Ensuite IE7 et opera , les endormi de la classe ... on debug body avec un positionement relatif qui occasionne un reflow et recalcul donc la position de chaque element.

Pour IE6 , si encore besoin , on triche avec des padding sur html ...

Pas de javascript necessaire , cependant ce qui me deplait vraiment dans cette technique de marges négatives , c'est cette histoire de conteneur a dimensions imposées ...

démo débuguée : http://yidille.free.fr/plux/valign/uploads/centre-position-absolute-marge-negatives.html ... histoires de confirmer mes dire

++