Encore une problème de centrage CSS

Damino

Membre confirmé
24 Novembre 2001
423
14
48
Paris - Montpellier
www.atelierscales.net
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

Modo (toujours vivant !)
Club MacG
26 Juin 2001
6 449
458
Rhône-Alpes
C'est pourtant diaboliquement logique ! ;)
Voilà ce qui devrait résoudre ton problème :

Bloc de code:
 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

Modo (toujours vivant !)
Club MacG
26 Juin 2001
6 449
458
Rhône-Alpes
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)

Bloc de code:
position:absolute;
width:300px;
height:200px;
margin-left: -150px;
margin-top: -100px;
Amusez-vous bien ;)
 

Damino

Membre confirmé
24 Novembre 2001
423
14
48
Paris - Montpellier
www.atelierscales.net
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.