Pied de page flottant ou ca lui chante
Katoru
Messages postés
6
Statut
Membre
-
Katoru -
Katoru -
Bonjour,
Je sais que mon problème parait bidon, mais j'ai cherché et aucune solution ne marchait.
Voici
J'aimerai un bandeau en bas de chaque page de mon site.
Je veux qu'il se trouve toujours en bas l'écran même si le contenu ne va pas en bas, mais je veux que si le contenu est plus grand que l'écran, ce bandeau suive le contenu pour ce trouver plus bas.
Actuellement, j'ai un premier Div <div id='Main'>Son contenu</div>
puis
<div ='footer'>son contenu</div>
Maintenant le CSS
#Main
{
border: 1px solid #008080;
padding: 2px;
width: 80%;
margin-left:10%;
position: relative;
min-height: 80%;
}
#footer
{
color: white;
position: absolute;
top:100%;
left:0;
padding: 3px;
padding-top: 15px;
background: url("/BETA/Images/BGPied.jpg");
margin-left: 10%;
width: 80%;
height: 5%;
}
Cette solution marche dès que le contenu n'est pas plus grand que l'écran, mais dès qu'il y a trop de contenu, le div flotte au dessus du Div Main et du coup rien n'est lisible (de toute façon la place du div footer c'est en bas de la page)
De plus lorsqu'une résolution plus petite que 1280*1024 est utilisée, la le pied de page il s'en va en vadrouille !!!
Donc si quelqu'un a une solution je le remercie beaucoup
Cordialement
Katoru
Je sais que mon problème parait bidon, mais j'ai cherché et aucune solution ne marchait.
Voici
J'aimerai un bandeau en bas de chaque page de mon site.
Je veux qu'il se trouve toujours en bas l'écran même si le contenu ne va pas en bas, mais je veux que si le contenu est plus grand que l'écran, ce bandeau suive le contenu pour ce trouver plus bas.
Actuellement, j'ai un premier Div <div id='Main'>Son contenu</div>
puis
<div ='footer'>son contenu</div>
Maintenant le CSS
#Main
{
border: 1px solid #008080;
padding: 2px;
width: 80%;
margin-left:10%;
position: relative;
min-height: 80%;
}
#footer
{
color: white;
position: absolute;
top:100%;
left:0;
padding: 3px;
padding-top: 15px;
background: url("/BETA/Images/BGPied.jpg");
margin-left: 10%;
width: 80%;
height: 5%;
}
Cette solution marche dès que le contenu n'est pas plus grand que l'écran, mais dès qu'il y a trop de contenu, le div flotte au dessus du Div Main et du coup rien n'est lisible (de toute façon la place du div footer c'est en bas de la page)
De plus lorsqu'une résolution plus petite que 1280*1024 est utilisée, la le pied de page il s'en va en vadrouille !!!
Donc si quelqu'un a une solution je le remercie beaucoup
Cordialement
Katoru
A voir également:
- Pied de page flottant ou ca lui chante
- Impossible de supprimer une page word - Guide
- Calcul km marche à pied gratuit - Télécharger - Sport
- Page d'accueil - Guide
- Imprimer tableau excel sur une page - Guide
- Numéro de page word - Guide
5 réponses
<div id='Main'>Son contenu</div>
<div ID='footer'>son contenu</div> // Tu avais oublié l'ID !
#Main
{
border: 1px solid #008080;
padding: 2px;
width: 80%;
margin-left:10%;
position: relative;
min-height: 80%;
}
#footer
{
color: white;
position: relative;
padding: 3px;
padding-top: 15px;
background: url("/BETA/Images/BGPied.jpg");
margin-left: 10%;
width: 80%;
height: 5%;
}
Ca marche ??
<div ID='footer'>son contenu</div> // Tu avais oublié l'ID !
#Main
{
border: 1px solid #008080;
padding: 2px;
width: 80%;
margin-left:10%;
position: relative;
min-height: 80%;
}
#footer
{
color: white;
position: relative;
padding: 3px;
padding-top: 15px;
background: url("/BETA/Images/BGPied.jpg");
margin-left: 10%;
width: 80%;
height: 5%;
}
Ca marche ??
Rebonjour :)
J'ai bien fait copier/coller, j'ai vidé le cache du navigateur et suis revenu sur la page.
Footer est bien en dessous de Main mais il n'est pas tout en bas de l'écran pour moi. ;)
Peut être que je demande un truc impossible, mais il me semble avoir déjà vu des sites comme çà.
J'ai bien fait copier/coller, j'ai vidé le cache du navigateur et suis revenu sur la page.
Footer est bien en dessous de Main mais il n'est pas tout en bas de l'écran pour moi. ;)
Peut être que je demande un truc impossible, mais il me semble avoir déjà vu des sites comme çà.
Ahhh.... tu veux qu'il soit tout en bas ?
padding: 3px;
Ca veut dire que tu aura une marge de 3px en haut, gauche, droit et en BAS !
Vire ça ;)
padding: 3px;
Ca veut dire que tu aura une marge de 3px en haut, gauche, droit et en BAS !
Vire ça ;)
Ah mais attends... tu es sous IE ?
Sous IE tu auras toujours une marge à la con.
Essaye sous Firefox, tu verra c'est bien collé.
Sous IE tu auras toujours une marge à la con.
Essaye sous Firefox, tu verra c'est bien collé.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
J'ai pas fais de copier/coller.
En mettant relative sur les 2 Div, celle du dessous ce met bien dessous la première, mais ne se met pas en bas de l'écran
Mais merci quand même ^^
Copie/colle ce que j'ai fait, chez moi ça marche :)