Partage
  • Partager sur Facebook
  • Partager sur Twitter

Lien sur une image décalé

footer avec les logos des réseaux sociaux sont décalés des liens

Sujet résolu
    28 janvier 2020 à 21:07:26

    Bonjour, je cherche à créer le footer de ma page web avec des images de réseaux sociaux clickable qui mènent à la page du site, seulement l'image n'est pas entièrement clickable, le lien se décale de l'image quelqu'un à une solution ?

    <footer>
                <div class="social-content">
                    <ul>
                        <li><a href="https://www.facebook.com/Husqvarna.Motorcycles.International/"><img src="img/icon/facebook.png"
                                    alt="facebook"></a></li>
                        <li><a href="https://twitter.com/Husqvarna1903"><img src="img/icon/twitter.png" alt="twitter"></a></li>
                        <li><a href="https://www.instagram.com/husqvarna.motorcycles/"><img src="img/icon/instagram.png"
                                    alt="instagram"></a></li>
                        <li><a href="https://www.youtube.com/user/Husqvarna1903"><img src="img/icon/youtube.png" alt="youtube"></a></li>
                    </ul>
                </div>
    
                <div class="footer-content">
                    <ul>
                        <li><a href="footer infos/contact.html">Contact</a></li>
                        <li><a href="footer infos/contact.html">Legal</a></li>
                        <li><a href="footer infos/contact.html">Dealer&Services</a></li>
                    </ul>
                </div>
            </footer>
    /*INFO*/
    footer {
        background-color: rgb(26, 26, 26);
        height: 200px;
        width: 100%;
    }
    
    .footer-content {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .footer-content ul li {
        padding: 15px 50px;
    }
    
    .footer-content ul a {
        color: white;
        font-family: "Modern", "Arial", sans-serif;
        font-size: 20px;
        text-transform: uppercase;
        word-spacing: 50px;
    }
    
    .footer-content ul a:hover {
        color: rgb(133, 133, 133);
    }
    /*INFO*/
    
    /*COMMUNICATION / SOCIAL*/
    .social-content {
        display: flex;
        float: right;
        padding: 10px 20px;
    }
    
    .social-content ul li {
        float: left;
    }
    
    .social-content a {
        width: 42px;
        height: 42px;
    }




    • Partager sur Facebook
    • Partager sur Twitter
      29 janvier 2020 à 1:41:05

      Essaie de remplacer

      .social-content a {
          width: 42px;
          height: 42px;
      }

      par 

      .social-content a img {
          width: 42px;
          height: 42px;
      }




      • Partager sur Facebook
      • Partager sur Twitter
        29 janvier 2020 à 12:14:22

        ça n'a rien changé du tout :/
        • Partager sur Facebook
        • Partager sur Twitter
          Staff 29 janvier 2020 à 12:45:19

          Bonjour,

          seulement l'image n'est pas entièrement clickable

          Pour quelles raisons utilises-tu une position relative pour la class .footer-content ?

          Le fait d'utiliser une position autre que static fait en sorte que l'élément est sortit du flux courant, il se superpose sur l'axe des z aux autres éléments. => cache une partie de l'image des réseaux sociaux comme tu le dis.

          Laisse le plus possible les éléments dans le flux courant.

          -
          Edité par AbcAbc6 29 janvier 2020 à 12:47:55

          • Partager sur Facebook
          • Partager sur Twitter
            29 janvier 2020 à 14:37:52

            ah oui super merci c'était ça, en fait je l'ai mis en relative pour centrer les liens. mais du coup une autre solution pour recentrer mes liens comme il l'était avant? j'ai encore du mal à visualiser les positions
            • Partager sur Facebook
            • Partager sur Twitter
              Staff 29 janvier 2020 à 16:31:04

              >> j'ai encore du mal à visualiser les positions

              Peut être que cette vidéo t'aidera à comprendre https://www.grafikart.fr/tutoriels/positionner-css-83

              Tu souhaites un centrage vertical de ta liste de lien "contact" "légal" ... ?

              si oui j'ai modifié un peux le code, en supprimant le flottant pour la liste des images et tout positionner en flexbox.

              L'utilisation de height pour un block de contenu n'est pas judicieuse, si ton contenu dépasse la hauteur fixée, ton design casse. Il vaux mieux utilisé la propriété min-height (que j'ai fixée à 400px pour mieux voir, à toi de fixé à 200 comme tu souhaites. )

              <!doctype html>
              <html lang="fr">
                  <head>
                      <meta charset="UTF-8">
                      <title>test</title>
                      <style>
                          /*INFO*/
                          footer {
                              background-color: rgb(26, 26, 26);
                              min-height: 400px;
                              /*width: 100%;*/
                              display: flex;
                              justify-content: space-between;
                          }
              
                          .footer-content {
                              /*position: relative;*/
                              /*top: 50%;*/
                              /*transform: translateY(-50%);*/
                              display: flex;
                              align-items: center;
                          }
              
                          .footer-content ul li {
                              padding: 15px 50px;
                          }
              
                          .footer-content ul a {
                              color: white;
                              font-family: "Modern", "Arial", sans-serif;
                              font-size: 20px;
                              text-transform: uppercase;
                              word-spacing: 50px;
                          }
              
                          .footer-content ul a:hover {
                              color: rgb(133, 133, 133);
                          }
                          /*INFO*/
              
                          /*COMMUNICATION / SOCIAL*/
                          .social-content {
                              display: flex;
                              /*float: right;*/
                              padding: 10px 20px;
                          }
              
                          .social-content ul li {
                              float: left;
                          }
              
                          .social-content a {
                              width: 42px;
                              height: 42px;
                          }
              
                      </style>
                  </head>
                  <body>
                      <footer>
                          <div class="footer-content">
                              <ul>
                                  <li><a href="footer infos/contact.html">Contact</a></li>
                                  <li><a href="footer infos/contact.html">Legal</a></li>
                                  <li><a href="footer infos/contact.html">Dealer&Services</a></li>
                              </ul>
                          </div>
                          <div class="social-content">
                              <ul>
                                  <li><a href="https://www.facebook.com/Husqvarna.Motorcycles.International/"><img src="img/icon/facebook.png"
                                                                                                                   alt="facebook"></a></li>
                                  <li><a href="https://twitter.com/Husqvarna1903"><img src="img/icon/twitter.png" alt="twitter"></a></li>
                                  <li><a href="https://www.instagram.com/husqvarna.motorcycles/"><img src="img/icon/instagram.png"
                                                                                                      alt="instagram"></a></li>
                                  <li><a href="https://www.youtube.com/user/Husqvarna1903"><img src="img/icon/youtube.png" alt="youtube"></a></li>
                              </ul>
                          </div>
                      </footer>
                  </body>
              </html>

              PS : pas de width: 100% sur un block au mieux cela ne fait rien, au pire cela crée un débordement si on y ajoute marging paddin et bordure.

              Lire : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/



              • Partager sur Facebook
              • Partager sur Twitter
                29 janvier 2020 à 16:53:29

                merci pour le tuto, j'ai réussis a faire ce que je voulais
                • Partager sur Facebook
                • Partager sur Twitter

                Lien sur une image décalé

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