[HTML/CSS] Pied de page [Résolu/Fermé]

Signaler
Messages postés
8
Date d'inscription
mardi 16 juin 2009
Statut
Membre
Dernière intervention
18 juin 2009
-
LuTo21
Messages postés
8
Date d'inscription
mardi 16 juin 2009
Statut
Membre
Dernière intervention
18 juin 2009
-
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

9 réponses

Messages postés
8
Date d'inscription
mardi 16 juin 2009
Statut
Membre
Dernière intervention
18 juin 2009
3
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;
}
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 72076 internautes nous ont dit merci ce mois-ci

Messages postés
8
Date d'inscription
mardi 16 juin 2009
Statut
Membre
Dernière intervention
18 juin 2009
3
Un petit up pour une petite aide lol :)
Messages postés
131
Date d'inscription
samedi 4 août 2007
Statut
Membre
Dernière intervention
18 novembre 2017
40
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é.
Messages postés
8
Date d'inscription
mardi 16 juin 2009
Statut
Membre
Dernière intervention
18 juin 2009
3
Oui j'avais testé d'enlever
position: absolute;
mais mon texte ne se retrouve plus en pied de page fixe.
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;
}"
????????
Messages postés
8
Date d'inscription
mardi 16 juin 2009
Statut
Membre
Dernière intervention
18 juin 2009
3
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. :)
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;
???
Messages postés
502
Date d'inscription
jeudi 14 mai 2009
Statut
Membre
Dernière intervention
10 mars 2010
42
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.
Messages postés
8
Date d'inscription
mardi 16 juin 2009
Statut
Membre
Dernière intervention
18 juin 2009
3
Merci je vais tester tout ça !