Discussion :

[MelleMSak]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[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

[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.

[MelleMSak]

Merci beaucoup, je vais regarder ces liens.