28111 sujets

CSS et mise en forme, CSS3

Footer image en bas de page

Bonjour,

J'ai un petit problème avec le site que je suis en train de réaliser. J'ai beau cherché sur les forums et sur des tuto je n'arrive pas à trouver une solution qui correspond à mon problème.

Je voudrais coller mon footer en bas de la page (sans débordement de fond en dessous). Mon footer se compose uniquement d'une image avec du texte par dessus.

Voici mon code html :

<div id="wrap">
   <div id="main">...</div>
   <footer>
        <img id="footer" src="img/footer.png" alt="herbe">
        <p>ET VISITEZ AUSSI NOTRE SITE <a 
        href="http://gurtner.fr/">WWW.GURTNER.FR</a></p>
    </footer>
</div>


et mes css :
html{
    height: 100%;
}

* {-moz-box-sizing: border-box; box-sizing: border-box;}

body{
    position: relative;
    height: 100%;
    background-color: #dd0028;
}

#wrap{
    position: relative;
    display: flex;
    flex-direction: column;
}

#main{
    position: relative;
    flex-grow: 1;
}

/*Footer*/
footer > p{
    color: white;
    font-family: "Helvetica", sans-serif;
    font-size: 3vw;
    text-align: center;
    margin-bottom: 6.5%;
    position: absolute;
    right: 10px;
    left:10px;
    bottom: 0;
}

footer > p >  a {
    color: white;
    text-decoration: none;
    font-family: "Helvetica Bold", sans-serif;
}


J'espère être assez clair dans ce que je recherche, merci beaucoup !
Sujet clos
Aller à