Ich kann meine Social Media Buttons nicht sehen

Question

Ich habe ein Problem, meine sozialen Tasten zu sehen, sie erscheinen und sind anklickbar, aber ich kann die Tasten nicht sehen.

Dies sind meine HTML-Tags:

<div class="social_buttons"> 

    <ul> 

     <li><div class="fb-btn"><a href="" target="_blank">Facebook</a></div></li> 
     <li><div class="ln-btn"><a href="" target="_blank">LinkedIn</a></div></li> 
     <li><div class="tw-btn"><a href="" target="_blank">Twitter</a></div></li> 
     <li><div class="gp-btn"><a href="" rel="publisher" target="_blank">Google+</a></div></li> 
     <li><div class="yt-btn"><a href="" target="_blank">Youtube</a></div></li> 

    </ul> 

</div> 

Dies ist die CSS-Datei, die für die HTML-Tags:

.social_buttons { 
    width: 41px; 
    position: fixed; 
    right: 0px; 
    top: 145px; 
} 
.social_buttons a { 
    display:block; 
    width: 100%; 
    height: 100%; 
    text-indent: -9999px; 
} 
.social_buttons ul { 
    margin: 0px; 
    padding: 0px; 
} 
.social_buttons li { 
    float: left; 
} 
.social_buttons .fb-btn, .social_buttons .ln-btn, .social_buttons .tw-btn, .social_buttons .gp-btn, .social_buttons .yt-btn, .social_buttons .sh-btn { 
    background-repeat: no-repeat; 
    width: 45px; 
    height: 45px; 
    margin-bottom: 10px; 
} 
.social_buttons .fb-btn { 
    background-image: url("../img/social_buttons/1463808493_facebook.png"); 
} 
.social_buttons .ln-btn { 
    background-image: url("../img/social_buttons/1463808541_linkedin.png"); 
} 
.social_buttons .tw-btn { 
    background-image: url("../img/social_buttons/1463808521_twitter1.png"); 
} 
.social_buttons .gp-btn { 
    background-image: url("../img/social_buttons/1463808579_google.png"); 
} 
.social_buttons .yt-btn { 
    background-image: url("../img/social_buttons/1463808557_youtube2.png"); 
} 

dankbar Würde ich fsomeone dieses Problem beantworten!

Answer 1

Sie haben eine feste Position rechts auf 0 gesetzt und Top Set zu 145px, wenn Sie wollen Ihre Tasten für Pixel nicht positionieren, um die Position zu entfernen: Festwert

.social_buttons { 
    // position:fixed; // <---- remove this 
    width: 41px; 
    // right: 0px; // <---- remove this 
    // top: 145px; // <---- remove this 
} 

Auch Ihre css Referenzen Bilder Urls für den Hintergrund, stellen Sie sicher, dass sie existieren relativ zu dem Ihre CSS-Datei ist:

.social_buttons .gp-btn { 
    background-image: url("../img/social_buttons/1463808579_google.png"); // make sure image file exists in this location 
} 

Sie dann in der Lage sein sollte, Ihre Tasten zu sehen.

Answer 2

Das Problem ist der erste Block des CSS:

.social_buttons { 
    width: 41px; 
    position: fixed; 
    right: 0px; 
    top: 145px; 
} 

Es ist Ihre Links nach rechts ab auf der Seite versteckt. Wenn ich alle CSS aber das entferne, funktioniert es gut.

Answer 3

Versuchen Sie, die Breite

.social_buttons { 
    width: 41px; 
    } 

mit Breite 41px Entfernen hier alle Tasten alle übereinander sind. Wenn Sie das entfernen, nehmen die div .social_buttons die gesamte Breite aller Schaltflächen ein.

Wenn Sie Tasten an einer anderen Stelle auf der Seite positionieren möchten, können Sie versuchen, mit den Tasten oben und rechts/links zu spielen.