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;
}

-Crixus-

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;
}

"Etre vrai, peu le peuvent."
Friedrich Nietzsche

AymericBosger

29 janvier 2020 à 12:14:22

ça n'a rien changé du tout :/

AbcAbc6

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

AymericBosger

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

AbcAbc6

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/

AymericBosger

29 janvier 2020 à 16:53:29

merci pour le tuto, j'ai réussis a faire ce que je voulais