[Résolu] Centrage de marges négatives...

Bonjour,

J'ai fait une recherche sur le forum pour voir si le problème avait été révélé, mais sans succès.
Je suis en train de faire un site Web avec un centrage marges négatives (ce tuto : Centrer les éléments ou un site web en css http://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html)

Je vérifie partout : ie6, ie7, ie8, safari mac et pc, firefox mac et pc! Tout le site fonctionne à merveille! Pas de bug rien!

La résolution du site est pour des écrans de 1024 X 768 px.
Ça aussi tout va bien, tester sous mac, pc, portable toshiba pc, portable mac... à résolution 1024 ou +...

Chez un ami, je décide de regarder mon site sur son portable DELL sous ie8.
Et la mon centrage aux marges négatives ne fonctionne pas bien.
Le site ne s'adapte pas à cet écran de portable DELL.
Il n'y pas de barres d'espacements pour qu'on puisse naviguer.
Et aussi le haut de l'interface est couper en haut du navigateur.

Est-ce qu'il y a un autre moyen pour faire un centrage (milieu de l'écran) en css pour que le site soit adapté à toute écran?

Merci.
Modifié par Ninik (29 Sep 2009 - 13:51)

Tu as le code ?

Et pourquoi ne pas utiliser les marges auto, les marges négatives étant déconseillées ?

Si c'est déconseillé pourquoi le montre-t-il sur le site de alsa?

J'ai fait comme le tutorial (lien dans mon premier message) :

#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px; /* moitié de la hauteur */
margin-left: -350px; /* moitié de la largeur */
border: 1px solid #000;
}

mon code :

#global {
position:absolute;
left: 50%;
top: 50%;
width: 958px;
height: 572px;
margin-top: -286px; /* moitié de la hauteur */
margin-left: -479px; /* moitié de la largeur */
}



Moi, je veux que mon site soit centrer au centre de l'écran (horizontalement et verticalement)...
Mais, quand on arrive sur un écran moins haute (disons-le comme ça) et bien l'interface coupe dans le haut (par exemple, le logo est à moitié pas là).
Modifié par Ninik (19 Sep 2009 - 17:00)

bonjour,

c'est le defaut des marges négative.

Il faut imposer un min-height et un min-width a body , au moins equivalemnt au conteneur que tu veut centrer , pour IE6 , appliquer un padding a body via commentaire conditionnel
..

gabarit de test a tester dans ton portable dell -> http://yidille.free.fr/plux/valign/uploads/centre-position-absolute-marge-negatives.html

GC

Ok merci!

C'est dommage que le logo coupe dans le haut dans certaine écran, mais j'ai refait l'interface seulement avec les marges horizontales.

Salut,

Juste pour préciser le préambule de l'article, dans la partie concernant les marges négatives :

a écrit :
Préambule : Les marges négatives 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.

Modifié par Mikachu (29 Sep 2009 - 14:09)

Hehe!
Merci bien de préciser!
Je vais laisser tomber cette méthode... je dois pas assez bien la maîtriser