Partage

Problème avec le footer

3 janvier 2018 à 16:24:51

Bonjour,

J'ai remarqué que lorsque je faisais inspecter l'élément sur le footer de mon site en local, ce-dernier se mettait à changer de position : il se "superposait" sur d'autres éléments.  Je vous mets les codes :

HTML :

<div id="container">

          ...


        <footer>
            <p>Tous droits réservés</p>
        </footer>

</div>

CSS:

#container{
    position: relative;
    min-height: 100%;
}

footer{
    height: 70px;
    width: 100%;
    border-top:2px solid
#2A2B27;
    background-color:black;
    bottom: 0;
    left: 0;
    line-height: 6px;
    margin-top: 10px;
    position: relative;
}

Merci d'avance pours vos réponses :)

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
3 janvier 2018 à 16:29:58

Mais encore ?

Et utilise le bouton </> pour insérer du code, parce que là, c'est horrible.

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
3 janvier 2018 à 16:32:58

Oui, désolé je n'ai pas trouvé le site permettant de copier du code

3 janvier 2018 à 16:36:36

Mais encore ?

Et utilise le bouton > pour insérer du code, parce que là, c'est horrible.

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
3 janvier 2018 à 16:43:30

HTML

<div id="container">

          ...


        <footer>
            <p>Tous droits réservés</p>
        </footer>

</div>

CSS

#container{
    position: relative;
    min-height: 100%;
}

footer{
    height: 70px;
    width: 100%;
    border-top:2px solid #2A2B27;
    background-color:black;
    bottom: 0;
    left: 0;
    line-height: 6px;
    margin-top: 10px;
    position: relative;
}




3 janvier 2018 à 16:45:55

Mais encore ?

(On avance !)

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
3 janvier 2018 à 16:47:51

Je ne comprends pas ce que vous voulez d'autres^^
3 janvier 2018 à 16:51:01

Bah une explication de ton problème, ce que tu as tenté, ce que tu as cherché.

c.f. les règles du forum concernant la formulation de demande

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
3 janvier 2018 à 16:55:00

Ok, merci, je n'avais pas vu la page concernant le forum

Alors, le footer est en bas lorsque je charge la page, tout se passe bien. Mais c'est quand je fais inspecter l'élément qu'il se colle en bas de ce-dernier. J'ai donc enlevé le bottom=0; mais cela ne changeait rien. J'ai déjà regarder d'autres articles concernant des problèmes avec le footer, mais aucun ne traitait de ce sujet

3 janvier 2018 à 17:04:49

Aurais-tu une capture d'écran pour illustrer ? Dit comme ça, j'avoue ne pas comprendre.

Pour héberger l'image, tu peux utiliser pix.

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
3 janvier 2018 à 17:18:51

... Et où est le problème ?

Le comportement me semble tout à fait standard.

-
Edité par Artemix 3 janvier 2018 à 17:19:03

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
3 janvier 2018 à 17:21:22

Avce inspecter l'élément, la distance entre le contenu du site et le footer diminue par rapport à normalement

3 janvier 2018 à 17:25:16

Normal puisque la hauteur de la fenêtre diminue pour laisser de la place aux outils de développement.

Ou alors je n'ai rien compris à ton problème non plus...

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
3 janvier 2018 à 17:26:48

XD, si je pense. Le problème est alors : comment faire un design qui s'adapte aux changements de taille de fenêtre ?
3 janvier 2018 à 17:49:27

Bah là, il s'adapte, non ?

Ensuite, réponse simple: Rien de forcé.

Un site sans CSS est 100% responsive, ce sont les CSS que tu va rajouter qui risque de le casser. Typiquement du absolute provoquera ca.

[Convertir une table en UTF8, mysql](https://gist.github.com/julp/4726120)
3 janvier 2018 à 20:12:25

Ok, merci de tes conseils, bonne soirée

Problème avec le footer

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown