[HTML/CSS] Pied de page Résolu

Question

Bonjour,

J'ai mis un pied de page qui soit visible sur chaque page html de mon site par contre je n'arrive à centrer mon texte au centre. Il démarre du milieu de la page et donc se retrouve sur la droite. Voic mon CSS :

* { margin:0;padding:0;}

html  { 
	height:100%;
	width:100%;
}
html img.imghtml, html div.imghtml{
	width:100%;height:100%;
	top:0;
	left:0;
	position:absolute;
}

html, html * {
	position:relative;
	z-index:0;
}
body {	top:0;
	left:0;
	position:absolute;
	z-index:1;
	width:100%;
	height:100%;
	overflow:hidden;
	color:#000;
	text-align:center;
}
#corps {
	width:100%; 
	height:100%;
	border:3px solid #000;
	margin:auto;
	border-top:0;
	border-bottom:0;
	overflow:auto;
}
#footer {
	position: absolute;
	bottom: 0;
	padding: 10px;
	width: center;
	color:#fff;
}

Et partie HTML pour le pied de page :

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="footer">
	<font size=1>| © 2009 tous droits réservés | Plan d'accès | Contacter |				</font>

</body>
</html>

Pouvez-vous m'aider à trouver l'erreur?
Merci

Configuration: Windows XP Internet Explorer 7.0

LuTo21 · Accepted Answer

Voici le code HMTL et CSS pour mettre un pied de page fixe sur chaque page et centré :

Fichier test.html :

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<div id="footer">
  <div id="foot_interne">
	<font size=1>VOTRE TEXTE</font>
  </div>
</div>
</html>

Fichier test.css :

#footer {
	position: absolute;
	bottom: 0;
	padding: 10px;
	width: 100%;
	color:#fff;
}
#foot_interne {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
}

LuTo21 · Answer

Un petit up pour une petite aide lol :)

glabok · Answer

Enlève simplement le 	position: absolute; de ton #footer .
Après je ne sais pas ce que va devenir ta mis en page, mais tu aura ton footer centré.

LuTo21 · Answer

Oui j'avais testé d'enlever position: absolute; mais mon texte ne se retrouve plus en pied de page fixe.

antoine · Answer

Dédolé mais qu'est ce que c'est que ce m... au début de la css ??????????

je cite "
html  { 
	height:100%;
	width:100%;
}
html img.imghtml, html div.imghtml{
	width:100%;height:100%;
	top:0;
	left:0;
	position:absolute;
}

html, html * {
	position:relative;
	z-index:0;
}"
????????

LuTo21 · Answer

Il ne faut pas en tenir compte

il faut voir #footer {
	position: absolute;
	bottom: 0;
	padding: 10px;
	width: center;
	color:#fff;
}
le reste je l ai déjà supprimé car je faisais des tests. :)

antoine · Answer

ok, mais c'est bizarre quand meme :

position: absolute;
	bottom: 0;
c'est par rapport au coin sup gauche de la balise de type block #footer
ce serait donc plutot bottom : - (hauteur de la boite) px; a toi de faire le calcul en récupérant par JS (par exemple) la hauteur utile en fonction du visteur

width: center; qué sa ko ???
Plutôt 
width : 980px 
ou 
text-align:center; 
???

Ozimandias · Answer

On ne peut pas centrer automatiquement une div en absolute donc on crée une div dans le div.
Le HTML: (je me sert de ton footer comme conteneur)

<div id="footer">
  <div id="foot_interne">
	<font size=1>| © 2009 tous droits réservés | Plan d'accès | Contacter |</font>
  </div>
</div>

Le CSS:

#footer {
	position: absolute;
	bottom: 0;
	padding: 10px;
	width: 100%;
	color:#fff;
}

#foot_interne {
        position: relative;
        margin-left: auto;
        margin-right: auto;
	width: 150px; // ici tu met la taille dont tu as besoin, pas plus
}

ça devrai marcher.

LuTo21 · Answer

Merci je vais tester tout ça !

[HTML/CSS] Pied de page

9 réponses

Discussions similaires

Newsletters