Encore une problème de centrage CSS

[Damino]

Salut à tous j'ai lu pas mal de post sur le sujet ainsi que le site Alsacreation mais je ne comprend toujours pas pourquoi que ce soit avec Safari ou Firefox je ne peux centre horizontalement mon bloc "popup" (intitule FLash news sur le site.

La feuille de style est Ici.
Pour arriver au centrage (à confirmer sur d'autres taille de moniteurs) je suis obliger d'indiquer des
"left:35%;
right:50%;"

dans ma feuille de style ?

 

[Niconemo]

C'est pourtant diaboliquement logique !
Voilà ce qui devrait résoudre ton problème :

 left:50%;
 right:50%;
 margin-left:-150px;
 width:300px;

Explication :
avec left:50% tu places ton bloc à 50% du bord gauche... mais le bloc fait 300px. donc le bord droit du bloc sera à 50% + 300px. Pour centrer le bloc il faut donc ajouter un margin-left négatif de la moitié de la largeur du bloc : 150 px. Je pense même que le "right" ne sert à rien (à vérifier : ce n'est pas une configuration que j'utilise habituellement).

 

[Niconemo]

Tiens au fait pour ceux que ça intéresse... c'est justement là la fameuse solution pour centrer une div verticalement :
(ne marche qu'en position:absolute avec des dimensions fixes)

position:absolute;
width:300px;
height:200px;
margin-left: -150px;
margin-top: -100px;

Amusez-vous bien

 

[Damino]

Et dire que j'avais déjà centré une image verticalement et horizontalement avec les marges négatives !

Je te dit donc merci de me réouvrir les yeux et il me faut relire les description des propriétés CSS.
Avant il y avait un site pour dreamweaver qui reprenait bien tout ça avec des exemples mais je crois qu'il a été modifié.

Enfin pour montrer que j'ai bien retenu la leçon si je met mon width en % : 30 % par exemple il me faudra mettre un left:35% (qui est le résultat de (100-30)/2 si je ne m'abuze).

Et voilà l'apprentissage est dur mais les conseils sont retenus.

Merci DODO.