Position du Footer

welcoMattic
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

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

bourdais6

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

tottosche

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

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
Auteur

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

tottosche

Aaah...

position static;

ça te convient?

welcoMattic
Auteur

ça ne fonctionne toujours pas même avec

positon : static;

sur #footer

tottosche

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
Auteur

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

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
Auteur

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

tottosche

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
Auteur

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

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

sinon tu trouvera ton bonheur là : pieds de page