Partage
  • Partager sur Facebook
  • Partager sur Twitter

Footer qui empiète sur mon contenu principal

Footer qui ne s'ancre pas à l'extrême fin de la page, après mon main

Sujet résolu
sophia_94
    25 décembre 2021 à 2:50:36

    Bonjour,

    Mon gros soucis et la touche finale de mon site qui m'a causer bien des problèmes en tant que débutante HTML et CSS :

    J'ai utilisé un footer trouvé sur le site Code pen (https://codepen.io/disc_doctor/pen/aRWNwx) cependant impossible de le faire commencer après mon contenu principal (main) composer de texte et d'images, il empiète systématiquement sur les derniers éléments au lieu de commencer juste après...je ne comprend pas !!!

    J'ai tout essayé, créer une div vide, utiliser les valeurs position : sticky, fixed, relative, absolute, bottom :0 et j'en passe mais je n'arrive pas à trouver la solution 😖 je ne comprend pas pourquoiiiii ça me rend folle !!

    Mon code HTML concernant le footer :

        </main>



        <footer class="footer-distributed">

            <div class="footer-left">


                <p class="footer-links">
                    <a href="index.html">Accueil</a> ·
                    <a href="graphisme.html">Graphisme</a> ·
                    <a href="art.html">Création artistique</a> ·
                    <a href="apropos.html">À propos</a> ·
                    <a href="contact.html">Contact</a>
                </p>

                <p class="footer-company-name">M.N &copy; 2021</p>
            </div>

            <div class="footer-center">

                <div>
                    <i class="fa fa-map-marker"></i>
                    <p><span> adresse </span> France </p>
                </div>

                <div>
                    <i class="fa fa-phone"></i>
                    <p>06 xx xx xx xx</p>
                </div>

                <div>
                    <i class="fa fa-envelope"></i>
                    <p><a href="mailto:m....">m....</a>
                    </p>
                </div>

            </div>

            <div class="footer-right">

                <p class="footer-company-about">
                    <span> blabla </span> blablabla
                </p>

                <div class="footer-icons">

                    <a href=""><i class="fa fa-instagram"></i></a>
                    <a href="x"><i class="fa fa-twitter"></i></a>
                    <a href="https://www.linkedin.com/in/marina-nait-amara-48b1311a7/"><i class="fa fa-linkedin"></i></a>

                </div>

            </div>

        </footer>

    Mon code CSS : 

    /* Le footer (bas de page) */


.footer-distributed {
  background-color: #dfd7c9; /* la couleur de fond du footer */
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  width: 100%;/* prend 100% de la longeur d'écran*/
  text-align: left;/* le texte doit s'aligner à gauche */
  font: bold 15px sans-serif; /* écriture en gras, en 16px */
  margin-top: 1%;
  bottom: 0;
  left: 0;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right {
  display: inline-block;
  vertical-align: top;
}/* disposition à l'aide de flexbox*/

/* Footer gauche */
.footer-distributed .footer-left {
  width: 40%; /* les éléments les plus à gauche prenne 40% de la longeur totale */
}

/* Mon logo : je n'en ai pas donc non utiliser ici  */

.footer-distributed h3 {
  color: #ffffff;
  font: normal 36px "Cookie", cursive;
  margin: 0; /* le logo et le "Marina NAIT-AMARA © 2021" corporate sign */
}
.footer-distributed h3 span {
  color: #5383d3;
}

/* Liens Footer = ne sert à rien car pas utiliser : tout à gauche  */

.footer-distributed .footer-links {
  color: #ffffff;
  margin: 50px 0 12px;
  padding: 0;
}

.footer-distributed .footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
}

.footer-distributed .footer-company-name {
  color: #8f9296;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center {
  width: 35%;
}

.footer-distributed .footer-center i {
  background-color: #33383b;
  color: #ffffff;
  font-size: 25px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-align: center;
  line-height: 42px;
  margin: 10px 15px;
  vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope {
  font-size: 17px;
  line-height: 38px;
}

.footer-distributed .footer-center p {
  display: inline-block;
  color: #ffffff;
  vertical-align: middle;
  margin: 0;
}

.footer-distributed .footer-center p span {
  display: block;
  font-weight: normal;
  font-size: 14px;
  line-height: 2;
}

.footer-distributed .footer-center p a {
  color: #5383d3;
  text-decoration: none;
}

/* Footer droit */

.footer-distributed .footer-right {
  width: 20%;
}

.footer-distributed .footer-company-about {
  line-height: 20px;
  color: #92999f;
  font-size: 13px;
  font-weight: normal;
  margin: 0;
}

.footer-distributed .footer-company-about span {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-distributed .footer-icons {
  margin-top: 25px;
}

.footer-distributed .footer-icons a { /* les icones de réseaux sociaux */

  display: inline-block;
  width: 35px;
  height: 35px;
  cursor: pointer;
  background-color: #33383b;
  border-radius: 2px;

  font-size: 20px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;

  margin-right: 3px;
  margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {
  .footer-distributed {
    font: bold 14px sans-serif;
  }

  .footer-distributed .footer-left,
  .footer-distributed .footer-center,
  .footer-distributed .footer-right {
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }

  .footer-distributed .footer-center i {
    margin-left: 0;
  }
}

    Une image qui illustre le problème :

    Pourrais-je avoir vos conseils, recommandations svp ?

    Merci beaucoup 

    -
    Edité par sophia_94 25 décembre 2021 à 3:04:56

    • Partager sur Facebook
    • Partager sur Twitter
    zvheer
      25 décembre 2021 à 8:29:56

      Bonjour !

      Je penses que le css que tu nous a montré n'est pas complet car je vois dans le css de la balise footer (.footer-distributed) un bottom;0; et un left:0;

      Ce qui veux dire que quelque part il y a eu position fixed ou absolute sur cette balise, je partirai sur position: fixed;

      Et donc c'est normal que la balise empiète sur le contenu car elle il ext fixé à la page. Il faut donc soit :

      - vous ne mettez aucune position donc vous trouvez l'endroit ou se position fixed est défini et vous l'enlevez donc il faut aussi enlever bottom:0; left:0; dans .footer-distributed qui ne serviront plus

      - soit vous conserver le position fixed mais donc vous mettez une marge suffisante entre le main et le footer donc la marge minimum est la hauteur du footer

      exemple si le footer fais en hauteur -> height: 100px;

      il faut que la balise main est comme marge quelque chose comme : margin-bottom:100px; // au minimum

      il y a d'autres manières je pense que vous trouvez sur google pour espacer un element en position fixed d'un autre.

      Pour moi si vous ne souhaitez pas qu'on voit le footer tant qu'on a pas finis la lecture du contenu de main alors la première solution est celle qu'i faut prendre

      Bonne journée !

      -
      Edité par zvheer 25 décembre 2021 à 8:33:32

      • Partager sur Facebook
      • Partager sur Twitter

      yasakani no magatama

      sophia_94
        25 décembre 2021 à 20:59:01

        Bonsoir ! 

        Merci de votre réponse, alors ce "bottom;0; et un left:0" était une éniéme expérience de ma part du coup aucune position fixed ou absolute dans mon footer.

        Cependant, j'ai utilisé votre solution d'utiliser "margin-bottom" sur mes boites qui contiennent mes projets et ainsi repousser ce footer qui empiète et ça fonctionne parfaitement bien que ce soit un peu du bricolage... au moins cela fonctionne 

        Je vous remercie donc pour votre précieuse aide !!

        -
        Edité par sophia_94 25 décembre 2021 à 20:59:24

        • Partager sur Facebook
        • Partager sur Twitter

        Footer qui empiète sur mon contenu principal

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown