Position du Footer

Par welcoMattic, il y a 15 ans

Les bases HTML/CSS

Salut !

J'aimerais savoir comment faire pour positionner correctement mon footer.
en bas de page même lorsque le contenu n'occupe pas toute la page. Et après tout le contenu si celui-ci rend la page scrollable.

Code HTML :

<div id="footer">

    <table>

        <tr>
            <td>
                La boutique de Laurence
                Le bourg
                61xxx Taillebois
            </td>

            <td>
                02 33 37 xx xx
            </td>

            <td>
                <a href="contact.php">Contact</a>
            </td>

        </tr>

    </table>

</div>

Code CSS : 

#footer{
    position: absolute;
    bottom: 0;
    margin-bottom: 5px;
    border-top: dotted;
    width: auto;
    left: 300px;
    right: 300px;
    font-size: 14px;
    }

le footer est appelé sur toute mes pages par : 

<php require ('footer.php'); ?>

15 réponses

tottosche, il y a 15 ans

Aaah...

position static;

ça te convient?

bourdais6, il y a 15 ans

Tu est sûr de ne pas avoir mal écrit la page du footer?

tottosche, il y a 15 ans

Pourquoi ne pas avoir utilisé 3 divs dans la div footer en float left?
Ainsi tu geres plus facilement et plus proprement les 3 cellules (adresse - tel - contact)

Pourquoi mettre bottom a 0 si après tu fait un margin-bottom de 5px? Ne peux tu pas mettre directement bottom a 5px?

tottosche, il y a 15 ans

Voici ma version:

CSS:

#footer{
    position: absolute;
    width: 100%;
    bottom: 5px;
    border-top: dotted;
    font-size: 14px;
}
#wrap {
    width: 900px; /* largeur de ton site */
    margin-left: auto;
    margin-right: auto;
}
#adresse {
    width: 200px;
    float: left;    
}
#tel {
    width: 500px;
    text-align: center; 
    float: left;
}
#contact {
    width: 200px;
        text-align: right;
    float: left;    
}

HTML: 

<div id="footer">
    <div id="wrap">
        <div id="adresse">
            La boutique de Laurence
            Le bourg
            61xxx Taillebois
        </div>

        <div id="tel">02 33 37 xx xx</div>

        <div id="contact"><a href="contact.php">Contact</a></div>

    </div>      

</div>
welcoMattic, il y a 15 ans

Merci pour ton script, mais le problème c'est que lorsque ma page est scrollable le footer n'est pas tout en bas, il est au niveau 0 (lorsqu'on n'a pas encore scroller) et lorsque je descend le footer bouge avec la page :(

welcoMattic, il y a 15 ans

ça ne fonctionne toujours pas même avec

positon : static;

sur #footer

tottosche, il y a 15 ans

J'imagine que le problème c'est que t'as pas assez de texte dans ton corps et le menu viens se foutre juste en dessous et ne colle pas en bas de la page...
Est tu sure que lorsque ton site sera complet, tu auras des pages avec si peu de contenu que la page ne sera pas scrollable?

welcoMattic, il y a 15 ans

Lorsque le site sera en ligne, il y aura de temps en temps une page ou le contenu ne prendra pas toute la fenêtre, mais dans le même temps le problème c'est que si le contenu prend plus de place que la fenêtre, le footer se place sur le contenu :s

tottosche, il y a 15 ans

En faite... pas besoin de mettre un positionnement, il faut juste que tu mette margin-bottom: 5px;

#footer{
    position: absolute;
    width: 100%;
    bottom: 5px;
    border-top: dotted;
    font-size: 14px;
}

devient: 

#footer{
    width: 100%;
    margin-bottom: 5px;
    border-top: dotted;
    font-size: 14px;
}
welcoMattic, il y a 15 ans

Toujours pas pour une page non complete. Par contre pour une page scrollable ça y est ça marche :D

tottosche, il y a 15 ans

Oui pour la page non complète ça ne fonctionne pas,
Je pense qu'il va falloir utiliser une ruse et jouer avec le div main/contenu

Par exemple:

#all {
    height: 100%;
}
#head{
    height: 100px;
    background: fushia;
}
#content {
    height: auto;
}
#footer{
    position: absolute;
    width: 100%;
    bottom: 5px;
    border-top: dotted;
    font-size: 14px;
}
#footer{
    position: absolute;
    width: 100%;
    bottom: 5px;
    border-top: dotted;
    font-size: 14px;
}
#wrap {
    width: 900px; /* largeur de ton site */
    margin-left: auto;
    margin-right: auto;
}
#adresse {
    width: 200px;
    float: left;    
}
#tel {
    width: 500px;
    text-align: center; 
    float: left;
}
#contact {
    width: 200px;
        text-align: right;
    float: left;    
}

<body>
<div id="all">
    <div id="head">
        BANNER
    </div>

    <div id="content">
        TON CONTENU
    </div>

    <div id="footer">

        <div id="wrap">

            <div id="adresse">
                La boutique de Laurence
                Le bourg
                61xxx Taillebois
            </div>

            <div id="tel">02 33 37 xx xx</div>

            <div id="contact"><a href="contact.php">Contact</a></div>  
        </div>      

    </div>
</div>

</body>

EDIT: Fonctionne pas...

welcoMattic, il y a 15 ans

Va-t- on y arriver ^^ J'ai pianoter sur le net mais sans succès ou alors avec des solutions JS assez lourdes a mettre en place, et comme je ne suis as trop calé JS encore j'évite, j'aime bien comprendre ce que je fais

the_sheep, il y a 15 ans

wow j'ai pas tout lu mais j'ai une méthode que marche bien :

warper_qui_a_tout_le_contenu{
margin : 0;
padding : 0;
min-height : 100%;
width : 100%;
}
#footer{
position : absolute;
bottom : 0;
}
the_sheep, il y a 15 ans

sinon tu trouvera ton bonheur là : pieds de page

welcoMattic, il y a 15 ans

J'ai essayer leur méthode sur pompage.net, c'est du flan, ça marche pas, en tout cas pour moi :s mais j'ai laisser tomber le footer pour le moment, on verra plus tard. Merci quand même :)