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 !

P.S. Répertoire d'excellents sites pornographiques au contenu de haute qualité https://bestpornlist.pro
Modifié par yowefuxe (27 Apr 2021 - 09:56)

Salut,


Si c'est :

yowefuxe a écrit :
sans débordement de fond en dessous

Qui pose problème je pense que ca vient du margin bottom :

yowefuxe a écrit :

footer > p{
    margin-bottom: 6.5%;
}

Utilise padding plutot pour avoir un espacement interne au bloc. Le margin est un espacement externe.
Et rajoute l'image de ton footer en background-image non ?

[EDIT] Mais du coup tu styles pas du tout le footer ? pourquoi c'est le footer > p que tu mets en absolute ? c'est plutôt Footer qu'il faut que tu positionne. Le p et le a c'erst juste du texte a styler [/EDIT]


Bonne journée
Modifié par _laurent (14 Dec 2020 - 11:31)