28172 sujets

CSS et mise en forme, CSS3

Bonjour, je suis en train de positionner mon footer.
Je fais comme d'habitude mais il ne veut pas se centrer dans la page. Il reste à gauche.


footer{
       position relative;
       float:left;
       width:500px;
       margin-left:auto;
       margin-right:auto;
       }


Mais rien ne se passe il reste collé à gauche.

Cela doit être quelque chose de simple mais la je sature un peu.

Mon site.

Merci d'avance.
Modifié par tintin_btz (05 Jun 2013 - 09:45)
Bonjour,

Il est normal que ton footer ne se centre pas étant donné que c'est un flottant :

float: left;


Pourquoi ne pas supprimer le flottant ?
Bonjour,

Pas évident de centrer des flottants, ce n'est pas prévu pour cela à la base.
À moins d'utiliser un autre conteneur auquel tu pourras appliquer un centrage via les marges automatique, je ne vois pas beaucoup d'autres solutions qui ne soient pas d'horribles bidouillages (js et encore...) Smiley ohwell
Dans ton cas, évidemment, si tu fais flotter à gauche, pas de possibilité de centrage via les marges automatique, et le comportement est celui attendu.

Ceci étant dit, lorsque je regarde plus attentivement ta page, tu uses et abuses de ce positionnement, ce qui ne te facilite pas forcément la vie...

Je te conseille la lecture d'un de mes articles préféré :
Guide de survie du positionnement CSS
Centrer les éléments ou un site web en CSS peut également t'intéresser.
Merci pour vos réponses.

-Quand j'enlève le float voici ce que cela donne:

mon site

-J'ai réussi à le centrer en bidouillant:

footer{
	position relative;
        float:left;
	width:1084px;
	}
	
#coord{
	width:500px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	font-size:9px;
	font-family:arial, helvetica;
	color:black;
	font-style:italic;
	background-color:white;
	margin-top:10px;
	padding:3px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border-width:5px;
	border-color: green;
	border-style: solid;
	}


Mais cela reste de la bidouille donc pas terrible.

Merci pour vos conseils, je continue d'essayer de l'améliorer.

tintin_btz
Modifié par tintin_btz (05 Jun 2013 - 14:38)
Re, donc j'ai réussi en bidouillant.
J'ai tenté aussi de mettre clear:both; sur footer cela fonctionné mais le footer resté coller à ma section même si j'appliquais un margin-top.

Je vais bucher ce que vous m'avez donné.

Si vous avez une solution moins compliquée que la mienne je suis preneur.

Merci encore