[HTML/CSS] Pied de page
Résolu
LuTo21
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
LuTo21 Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
LuTo21 Messages postés 8 Date d'inscription Statut Membre Dernière intervention -
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 :
Et partie HTML pour le pied de page :
Pouvez-vous m'aider à trouver l'erreur?
Merci
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
A voir également:
- Pied de page css
- Impossible de supprimer une page word - Guide
- Calcul km marche à pied gratuit - Télécharger - Sport
- Numéro de page word - Guide
- Imprimer tableau excel sur une page - Guide
- Page d'accueil - Guide
9 réponses
Voici le code HMTL et CSS pour mettre un pied de page fixe sur chaque page et centré :
Fichier test.html :
Fichier test.css :
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;
}
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é.
Après je ne sais pas ce que va devenir ta mis en page, mais tu aura ton footer centré.
Oui j'avais testé d'enlever
position: absolute;mais mon texte ne se retrouve plus en pied de page fixe.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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;
}"
????????
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;
}"
????????
Il ne faut pas en tenir compte
il faut voir
le reste je l ai déjà supprimé car je faisais des tests. :)
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;
???
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;
???
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)
Le CSS:
ça devrai marcher.
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.
