28173 sujets

CSS et mise en forme, CSS3

Centrer avec une position absolute

Bonjour,

Le pied de page de mon site (lien en signature) me pose quelques soucis.

La marge à gauche est légèrement plus grande que celle de droite. Cela se voit en réduisant la fenêtre, il y a plus de orange a gauche qu'à droite.

Le contenu du pied de page n'est ni centré par rapport à la page ni par rapport à la div.

J'ai testé plusieurs solutions et j'ai laissé la mieux visuellement donc voici mon code css :

#footer {
	position : absolute;
	bottom : 0px;
	background-color : #F5DD47;
	text-align : center;
	width : 90%;
	left : 5%
}

#footer a:link, #footer a:visited, #footer a:active {
	font-family : Verdana;
	font-size : 10pt;
	color : #1833BD;
	text-decoration : none;
}

#footer a:hover {
	text-decoration : underline overline;
}

#footer img {
	position : absolute;
	top : 50%;
	margin-top : -7px; /* moitié de la hauteur de l'image */
	background-color : #F5DD47;
}


Merci d'avance
Modifié par Bellami (21 Jan 2007 - 14:58)
Tiens, chez moi ça semble parfaitement centré (safari2) ...

Sinon, essaye peut-être de centrer ton footer avec la technique des marges négatives:


#footer {

position:absolute;
bottom:0;
background:#f5dd47;
text-align:center;
width:90%;
[#red]left:50%;
margin-left:-45%;[/#]

}
Benjamin D.C. a écrit :
Tiens, chez moi ça semble parfaitement centré (safari2) ...

Un bug du calcul des positions et dimensions en pourcentages avec Firefox ? Il me semble qu'il y en a un ou deux qui trainent.
Florent V. a écrit :
Un bug du calcul des positions et dimensions en pourcentages avec Firefox ? Il me semble qu'il y en a un ou deux qui trainent.
Ah oui, effectivement je viens de tester avec Firefox et la marge de droite est clairement inférieure à l'autre. Un petit bug, donc, facilement contournable ceci dit avec la méthode que je propose ci-dessus...

Au passage, cela fonctionne bien aussi sur Opera et, plus étonnamment, sur Camino!
Benjamin ta méthode ne fonctionne pas non plus Smiley decu
Il y a toujours le même problème, la marge de gauche est plus grande que celle de droite et le texte est également décalé sur la droite sous FF.

Sous IE6, c'est la marge de droite qui est plus grande et le texte toujours décalé sur la droite...
Sujet clos
Aller à