Я не могу видеть мои кнопки социальных сетей

У меня есть проблема, видя мои социальные кнопки, они появляются и кликабельны, но я не могу видеть кнопки.

Это мои html теги:

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

Это файл CSS, который для тегов HTML:

.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"); 
}

Был бы признателен, я fsomeone может ответить на этот вопрос!

3 ответа

  1. У вас есть фиксированная позиция с правым значением 0 и верхним значением 145px, если вы не хотите располагать кнопки по пикселям, удалите позицию: фиксированное значение

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

    Кроме того, ваш css ссылается на изображения URL для фона, убедитесь, что они существуют относительно того, где ваш файл css:

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

    После этого вы сможете увидеть свои кнопки.

  2. Проблема в первом блоке вашего CSS:

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

    Он скрывает ваши ссылки справа от страницы. Если я удаляю все CSS, но это, это работает хорошо.

  3. Попробуйте удалить ширину

     .social_buttons {
       width: 41px;
      }
    

    с шириной 41px здесь все кнопки находятся друг на друге. Удалив это, div .social_buttons займет всю ширину всех кнопок.

    Если вы хотите разместить кнопки в другом месте на странице, вы можете попробовать играть с верхней и правой/левой.