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


welcoMattic
Auteur
Réponse acceptée

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 :)

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

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?

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>

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 :(

Aaah...

position static;

ça te convient?

ça ne fonctionne toujours pas même avec

positon : static;

sur #footer

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?

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

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;
}

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

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...

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

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;
}

sinon tu trouvera ton bonheur là : pieds de page