Affichage CSS sous Firefox

Version imprimable

Bonjour,

Je viens de faire la première mise à jour sur mon site web.

Sous Firefox, le contenu ne s'affiche pas comme il faut, alors que sous IE, tout s'affiche correctement.

Il me semble bien que c'est un problème de CSS

voilà le lien qui pose problème :
http://lemoulindesdelices.free.fr/Accueil.html

voici un extrait css :

Code:

1
2
3
4
5
6
7
.centre2 { border: 1px solid #330033; background-color: #ffccff; color: #330033; margin-top: 270px; position: absolute; margin-left: 230px; width: 200px; }
.centre3 { border: 1px solid #330033; color: #330033; position: absolute; background-color: #ffcc5a; height: 259px; margin-top: 270px; width: 400px; margin-left: 440px; }
.centre4 { border: 1px solid #330033; color: #330033; position: absolute; margin-top: 550px; margin-left: 220px; width: 620px; font-family: Cambria; background-color: #ccccff; }
.centre3 a { border-color: white; border-width: 1px; color: #330033; background-color: #ff9966; }
.centre3 a:hover { color: #cc33cc; }
.centre5 { border: 2px groove #ffcc33; width: 184px; margin-right: 616px; font-family: Constantia; position: absolute; text-align: center; margin-left: 15px; color: #663366; margin-top: 700px; background-color: #ffcc5a; }
.centre5 a { color: #663366; background-color: #ff9966; }

Merci de votre aide

27/01/2009, 21h48
Macmillenium

Bonsoir,

Ta mise en page, est vraiment a revoir ...
Beaucoup trop de positionnement absolute très mal utilisé ...

Ton conteneur parent #main est en relative, pour le centrer, les marges automatiques feront l'affaire ...

le left:-400px; et margin-left:50% (c'est censé être l'inverse) ont fait apparaitre un scroll horizontale sous IE
28/01/2009, 17h03
MelleMSak

Bonjour,

C'est vrai j'avoue je ne sais pas vraiment utiliser l'absolu et le relatif.

Je ne comprends pas très bien la différence.

Quand faut-il utiliser l'un plutôt que l'autre ?

MERCI :oops:
28/01/2009, 20h37
12monkeys

Bonsoir

Un peu de lecture : http://css.developpez.com/cours/#design et surtout celui ci : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Le positionnement relatif conserve l'élément dans le flux puis permet, à l'aide des propriétés 'top', 'right', 'bottom', 'left' de le décaler verticalement et/ou horizontalement. L'élément garde cependant sa place d'origine dans le flux.

Le positionnement absolu fait sortir complètement l'élément du flux : c'est à dire que les éléments voisins dans le code se positionnent comme si cet élément en absolu n'existe plus. L'élément en absolu se positionne ensuite grâce aux mêmes propriétés 'top', 'right', 'bottom', 'left'.

L'élément positionné en absolu se positionne par défaut en fonction de son premier parent lui même positionné (en relatif), à défaut en fonction de la fenêtre du navigateur.
29/01/2009, 12h20
MelleMSak

:king: Merci beaucoup, je vais regarder ces liens.