С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
Ernst_Hofer
16 / 4 / 0
Регистрация: 27.06.2016
Сообщений: 99
1

Социальные кнопки

14.06.2017, 18:17. Просмотров 1052. Ответов 9
Метки нет (Все метки)

Нашел в инете код этих кнопок, но почему-то не отображаются соц.сети vk, fb и tw.

Пробовал вставить их по отдельности
CSS
1
background-image: url('images/vk.png');
и т.д. - не получилось.

Что за путь и что он делает ?
CSS
1
background: #bdc3c7 url("/assets/course14/social.png") no-repeat;
Код взят от сюда: https://htmlacademy.ru/courses/55/run/3

HTML5
1
2
3
4
5
6
7
8
<body>
        <div class="share">
            <b>Соцсети</b>
            <a class="social social-vk" href="http://vk.com/htmlacademy"></a>
            <a class="social social-fb" href="http://www.facebook.com/htmlacademy"></a>
            <a class="social social-tw" href="http://twitter.com/htmlacademy_ru"></a>
        </div>
    </body>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
body {
    margin: 0;
    padding: 0;
    font-family: "PT Sans", sans-serif;
    font-size: 14px;
}
 
.share {
    width: 270px;
    margin: 0 auto;
    margin-top: 120px;
    padding: 10px;
    padding-left: 20px;
    background: #ecf0f1;
}
 
.share b {
    margin-right: 15px;
    font-weight: normal;
    text-transform: uppercase;
    color: #7f8c8d;
}
 
.social {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background: #bdc3c7 url("/assets/course14/social.png") no-repeat;
    vertical-align: middle;
}
 
.social-vk {
    background-color: #6d8fb3;
    background-position: 0 0;
}
 
.social-fb {
    background-color: #526da3;
    background-position: -40px 0;
}
 
.social-tw {
    background-color: #73bfe6;
    background-position: -80px 0;
}
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.06.2017, 18:17
Ответы с готовыми решениями:

Социальные Кнопки
Здравствуйте друзья. Я новенький на вашем форуме и вообще в веб...

Социальные кривые кнопки
Поставил кнопки, но работают, во-первых кривовато, во-вторых, просто нужно...

Социальные виджеты
Скажите пожалуйста вот виджеты взял с социальных сетей размещаю на сайте но они...

Социальные иконки
Как установить боковую панель социальных иконок? Есть какие-то фреймворки?

Социальные иконки icomoon отображаются только в Сафари, как исправить?
Социальные иконки icomoon отображаются только в Сафари, в остальных браузерах...

9
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
14.06.2017, 19:20 2
Блокировщик рекламы отключите.
0
Ernst_Hofer
16 / 4 / 0
Регистрация: 27.06.2016
Сообщений: 99
14.06.2017, 21:01  [ТС] 3
Цитата Сообщение от mrtoxas Посмотреть сообщение
Блокировщик рекламы отключите.
Зачем ? И как он влияет на это ? У меня всего лишь не отображаются значки соц. сетей. Что и где мне нужно исправить ?
0
Изображения
 
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
14.06.2017, 21:11 4
Цитата Сообщение от Ernst_Hofer Посмотреть сообщение
Зачем ?
Потому что, блокировщики режут кнопки соц.сетей.
Код рабочий. Что пишет консоль по этому поводу? Может путь к спрайту не правильно указан.
0
Ernst_Hofer
16 / 4 / 0
Регистрация: 27.06.2016
Сообщений: 99
14.06.2017, 22:04  [ТС] 5
Цитата Сообщение от mrtoxas Посмотреть сообщение
Что пишет консоль по этому поводу? Может путь к спрайту не правильно указан.
Консоль ни чего не пишет. Возможно по этому пути спрайты отображались на сайте
CSS
1
background: #bdc3c7 url("/assets/course14/social.png") no-repeat;
Но по моему это не возможно, что бы по одному пути отображались все 3 спрайта, я не пойму за что это отвечает ? При удалении ни чего не меняется

Добавлено через 3 минуты
Цитата Сообщение от mrtoxas Посмотреть сообщение
Может путь к спрайту не правильно указан.
В коде всего лишь один путь прописан к спрайту, а на сайте отображаются все спрайты
0
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
14.06.2017, 22:07 6
Ernst_Hofer, спрайт один и содержит в себе несколько иконок . Для того, чтобы это работало, вам нужно поместить спрайт в свой проект и указать ссылку на него, или указать точный адрес, где этот спрайт сейчас находится. И почитать про спрайты.
0
Ernst_Hofer
16 / 4 / 0
Регистрация: 27.06.2016
Сообщений: 99
14.06.2017, 22:23  [ТС] 7
Цитата Сообщение от mrtoxas Посмотреть сообщение
Ernst_Hofer, спрайт один и содержит в себе несколько иконок
А нельзя как ни будь туда засунуть 3 png картинки заместо того спрайта? Ну или если вы знаете где можно найти тот спрайт то я бы не отказался и от него
0
Ernst_Hofer
16 / 4 / 0
Регистрация: 27.06.2016
Сообщений: 99
15.06.2017, 09:33  [ТС] 8
Вот у меня путь указан к спрайту, но его нет на web странице

CSS
1
2
3
4
5
6
7
.social {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background: #bdc3c7 url("/images/social.png") no-repeat;
    vertical-align: middle;
0
Изображения
 
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
15.06.2017, 09:42 9
Лучший ответ Сообщение было отмечено Ernst_Hofer как решение

Решение

Слеш перед images уберите
1
Вложения
Тип файла: zip cbfrm.zip (1.7 Кб, 2 просмотров)
Ernst_Hofer
16 / 4 / 0
Регистрация: 27.06.2016
Сообщений: 99
15.06.2017, 10:20  [ТС] 10
Цитата Сообщение от mrtoxas Посмотреть сообщение
Слеш перед images уберите
Всё я разобрался, я спрайт в другую папку кинул ближе к css файлам и всё заработало
0
15.06.2017, 10:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.06.2017, 10:20

При нажатии на кнопку,другие кнопки приближаются к данной кнопки
Привет всем!При нажатии на кнопку,другие кнопки приближаются к кнопке на...

Автоматическое изменение размера кнопки в зависимости от фото которое находится на фоне кнопки
Например я сделал кнопку и поставил в кнопку фото, но на кнопке видно только...

Блокировка/разблокировка кнопки, скрытие кнопки
Здравствуйте, помогите с кодом, пожалуйста. Нужно составить калькулятор...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru