Problème Footer

Default
,

Bonjour,

Je viens vers vous car je ne trouve aucune solution à mon problème​.

Je travaille actuellement sur mon site personnel et je n'arrive pas à résoudre un problème d'affichage dans mon footer.

Je m'explique.. mon footer est composé en 3 parties.

  • La première partie est composé d'une flèche orientée vers le haut, qui sert d'encre pour remonter vers le header.
  • La deuxième partie est composé d'une div avec une bordure en haut et en bas centrer à 20 % de la gauche et de la droite, cette partie contient mon adresse mon téléphone le nom de mon entreprise, ainsi que les liens vers mes réseaux sociaux et une page contact.
  • La dernière partie se trouve tout en bas de la page c'est elle qui contient l'espace presse, les mentions légales, la politique et les conditions générales de mon site. La liste est séparé au centre par mon logo.

Code HTML

<!--Début Footer-->
  <footer>
     <div class="container_footer">
        <!--ANCRE HAUTE DE PAGE-->
        <div class="bouton_fleche">
            <a class="bouton_fleche" href="#haut_de_page" title="Haut de Page"></a>
        </div>
        <!--COORDONNER-->
        <div class="coord_footer">
          <div class="adresse_footer coord_footer_list">
            <h2><span>adresse<br>adresse- pays</span></h2> 
          </div>
          <div class="telephon_footer coord_footer_list">
            <h2><span>06 xx xx xx xx</span></h2> 
          </div>
          <div class="titre_site_footer coord_footer_list">
            <h1><span>Nomdusite</span></h1> 
          </div>
          <div class="logo_container_footer">
            <div class="sociaux_footer coord_footer_list">
              <h2><span># Suivez-moi</span></h2>
            </div>
            <div class="logo_fb_footer logo_sociaux_footer">
              <a class="logo_facebook" href="https://www.facebook.com/mapagefb/" target="_blank" title="facebook"></a>
            </div>
            <div class="logo_insta_footer logo_sociaux_footer">
              <a class="logo_instagram" href="https://www.instagram.com/mapageinsta/" target="_blank" title="instagram"></a>
            </div>
          </div>
          <div class="contact_footer coord_footer_list">
            <h2><span><a href="footer/contact.html" title="Contactez-Moi">Contact</a></span></h2>
          </div>
        </div>
        <!--MENTIONS LEGALES-->
        <div class="list_final_footer">
          <div class="list_final_footer_left list_total_final_footer">
            <h2>
              <a href="footer/espace_presse.html" class="spacing_footer"><span>Espace Presse</span></a>
              <a href="footer/mentions_legales.html" class="spacing_footer"><span>Mentions Légales</span></a>
              <a href="footer/conditions_generales.html" class="spacing_footer"><span>Conditions Générales</span></a>
              <a href="footer/cokkies.html">Cokkies</a>
            </h2>  
          </div>
          <div class="list_final_footer_right list_total_final_footer">
            <h2>
              <a href="footer/politique_de_confidentialite.html" class="spacing_footer"><span>Politique de confidentialité</span></a>
              <a href="footer/credit_photos.html" class="spacing_footer"><span>Crédit Photos</span></a>
              <img class="logo_copy_footer"src="../../IMG/png/logo_copyright_grey.png" alt="copyright"/><a href="footer/copyright.html" class="spacing_footer"><span>2019 monsite.com</span></a>
            </h2>
          </div>
        </div>
        <div class="logo_footer">
          <img src="../../IMG/png/logo_GB.png" alt="logo_GB">
        </div>

     </div>
  </footer>
<!-- Fin Footer-->

Code CSS

body{
  margin: 0px;
  padding: 0px;

}

/*DEBUT - container_footer*/
.container_footer{
  margin:0;
  left:0;
  padding:0;
  width: 100%;
  height: 400px;
  position: relative;
  background-color: rgb(71,84,101);
  box-shadow: 0px 10px 10px -10px rgb(27, 27, 27) inset;

}
/*FIN - container_footer*/

/*DEBUT - bouton_fleche*/
a.bouton_fleche{
 background-image: url(../IMG/png/fleche_footer_grey.png);
 position:absolute;
 left: 50%;
 transform: translateX(-50%) translateY(0%);
 border: 0;
 top: 20px;
 cursor: pointer;
 width: 23px;
 height: 23px;
 filter: drop-shadow(0 0 0.80rem black);

}

a.bouton_fleche:hover{
 filter: drop-shadow(0 0 0.60rem black);
 transition: 0.5s;
 background-image: url(../IMG/png/fleche_footer.png);

}
/*FIN - bouton_fleche*/

/*DEBUT - coord_footer*/
.coord_footer{
 width:  80%;
 position:absolute;
 top:60px;
 height: 150px;
 left: 10%;
 border-top: 1px solid #aeaeae;
 border-bottom: 1px solid #aeaeae;

}

.adresse_footer{
 height: 100%;
 width: 18%;
 left: 5%;
 top:0;
 position:absolute;

}

.adresse_footer h2{
 font-size: 18px;
 text-align: center;
 height: 150px;
 display: table;
 width: 100%;
 color: white;
 font-family: calibri, sans-serif;
 text-shadow: 0px 1px 2px black;

}

.adresse_footer h2 span{
 vertical-align:middle;
 display: table-cell;

}

.telephon_footer{
 height: 100%;
 width: 18%;
 left: 23%;
 top:0;
 position:absolute;

}

.telephon_footer h2{
 height: 150px;
 width: 100%;
 text-align: center;
 color: white;
 font-size: 20px;
 display: table;
 font-family: calibri, sans-serif;
 text-shadow: 0px 1px 2px black;

}

.telephon_footer h2 span{
 vertical-align:middle;
 display: table-cell;

}

.titre_site_footer{
 height: 100%;
 width: 18%;
 left: 41%;
 top:0;
 position:absolute;

}

.titre_site_footer h1{
 height: 150px;
 width: 100%;
 text-align: center;
 color: white;
 font-size: 25px;
 display: table;
 text-shadow: 0px 1px 2px black;

}

.titre_site_footer h1 span{
 vertical-align:middle;
 display: table-cell;

}

.logo_container_footer{
 height: 100%;
 width: 18%;
 left: 59%;
 top:0;
 position:absolute;

}

.sociaux_footer{
 height: 100%;
 position:absolute;
 left: 0;
 width: 60%;

}

.sociaux_footer h2{
 height: 150px;
 width: 100%;
 text-align: center;
 color: white;
 font-size: 20px;
 display: table;
 font-family: calibri, sans-serif;
 text-shadow: 0px 1px 2px black;

}

.sociaux_footer h2 span{
 vertical-align:middle;
 display: table-cell;

}

.logo_fb_footer{
 height: 150px;
 position:absolute;
 left: 60%;
 width: 20%;

}

.logo_fb_footer a{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


.logo_insta_footer{
 height: 150px;
 position:absolute;
 left: 80%;
 width: 20%;

}

.logo_insta_footer a{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);

}

.contact_footer{
 height: 100%;
 width: 18%;
 left: 77%;
 top:0;
 position:absolute;

}

.contact_footer h2{
 height: 150px;
 width: 100%;
 text-align: center;
 font-size: 25px;
 display: table;
 font-family: calibri, sans-serif;

}

.contact_footer h2 span{
 vertical-align:middle;
 display: table-cell;

}

.contact_footer h2 a{
 text-decoration:none;
 color: white;
 text-shadow: 0px 1px 2px black;
 transition: 0.5s;
}

.contact_footer h2 a:hover{
 text-shadow: 0px 1px 2px black;
 color: rgb(161, 161, 161);
}

.coord_footer_list h1{
 margin:0;
 padding:0;

}

.coord_footer_list h2{
 margin:0;
 padding:0;

}


a.logo_facebook{
 background: url(../IMG/png/logo_fb_grey.png) no-repeat;
 display: block;
 width: 24px;
 height: 24px;
 position: absolute;
 filter: drop-shadow(0 0 0.100rem black);

}

a.logo_facebook:hover{
 background: url(../IMG/png/logo_fb.png) no-repeat;
 transition: 0.5s;
 filter: drop-shadow(0 0 0.30rem black);

}

a.logo_instagram{
 background: url(../IMG/png/logo_insta_grey.png) no-repeat;
 display: block;
 width: 24px;
 height: 24px;
 position: absolute;
 filter: drop-shadow(0 0 0.100rem black);

}

a.logo_instagram:hover{
 background: url(../IMG/png/logo_insta.png) no-repeat;
 transition: 0.5s;
 filter: drop-shadow(0 0 0.30rem black);

}
/*FIN - coord_footer*/

/*DEBUT - list_final_footer*/
.list_final_footer{
 position: absolute;
 bottom: 15px;
 height: 14px;
 width: 100%;
 left: 0;
 z-index: 10;
}

.list_total_final_footer h2{
 font-size: 14px;
 margin: 0;
 padding: 0;
 word-spacing: 50px;
 font-family: calibri, sans-serif;

}

.list_total_final_footer h2 a{
 text-decoration: none;
 color: rgb(161, 161, 161);
 text-shadow: 0px 0px 2px #111111;
}

.list_total_final_footer h2 a:hover{
 color: white;
 text-shadow: 0px 0px 3px #000000;
 transition: 0.5s;
}

.spacing_footer span{
 word-spacing: 2px;

}

.logo_copy_footer{
 width: 14px;
 height: 14px;
 filter: drop-shadow(0 0 0.100rem black);
 margin: 0;
 padding: 0;
 top: 50%;
 transform: translateY(20%);
 padding-right: 2px;

}

.list_final_footer_left{
 width: 50%;
 left: 0;
 background-color: blue;
 position: absolute;

}

.list_final_footer_left h2{
 right: 30px;
 position: absolute;

}


.list_final_footer_right{
 width: 50%;
 right: 0;
 background-color: green;
 position: absolute;

}

.list_final_footer_right h2{
 left:30px;
 position: absolute;

}
/*FIN - list_final_footer*/

/*DEBUT - logo_footer*/
.logo_footer{
 width: 100%;
 position: absolute;
 bottom:10px;
 height: 40%;

}

.logo_footer img{
 position: absolute;
 left: 50%;
 transform: translateX(-50%) translateY(0%);
 height: 100%;
 filter: drop-shadow(0 0 0.20rem #111111);

}
/*FIN - logo_footer*/

J'ai obtenu le résultat final que je souhaitais. Cependant pas de façon responsive, en effet dès que je réduis la page les mots se montent les uns sur les autres.

Je soupçonne les valeurs en pourcentage que j'ai utilisé pour placer mes div​. Je suis convaincu que le problème vient de la. Je suis aussi conscient que je devrais mieux utiliser des listes pour placer mes liens, mais je ne sais pas comment m'y prendre.

Aidez-moi s'il vous plaît !!

4 Réponse

Default
,

Bonjour,
As-tu vu la vidéo sur les media Query ?

Default
,

Bonjour,
Merci pour ta réponse IconB !

Je suis bien conscient que le media query sert pour le responsive. Mais je pense que mon code est mal écrit de base et j'ai peur que cela impacte sur mon site plus tard et crée des bugs.

Est-ce que c'est possible de jeter un coup d'œil et de me dire si quelque chose cloche, où dans le cas contraire me dire si le code ne comporte pas d'erreur ?

Merci beaucoup !

Default
,

Bonjour,
Petit conseil: pour voir si ton code html ne contient pas d'erreur voir sur https://validator.w3.org/
Autre chose: dans ton code css il y'a pas de mediaquery et c'est nécessaire quand tu veux changer l'apparence de ton site sur des appareils avec des largeurs limités.
Si tu as vu tous les tuto de jonathan sur le web tu aurais du faire tout ton code sur base de téléphone mobiles et par la suite utiliser les @media ...
Pour les ordinateurs et tablettes.
Conclusion: mets des @media dans tes codes css
Par exemple

@media only screen and (max-width: 700px)
{
    ....
    ....
    ...
}

Les petits points c'est la ou tu vas arranger tous tes textes en changeant leur taille, hauter, flex, float, display etc etc...

Default
,

Another thing: in your css code there is no mediaquery and it is necessary when you want to change the look of your site on devices with limited widths.