Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 02.01.2018
Сообщений: 1
1

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

02.01.2018, 15:41. Просмотров 529. Ответов 2
Метки нет (Все метки)

Здравствуйте друзья. Я новенький на вашем форуме и вообще в веб программирование. Выучил HTML,CSS и чуток PHP. Сейчас пытаюсь создать сайт с помощью html и css. Застрял на одной проблеме. Кстати на этой проблеме я всегда застреваю. Дело не в том как сделать соц кнопки, а как их зафиксировать к правой стороне. Вот код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<footer>
        <span class="left"> Все права защищены &copy; <?php echo date (Y); ?></span>
        <span class="right">
            <img src="ico/facebook.png" alt="Фейсбук"/>
        
            <img src="ico/twitter.png" alt="Твиттер"/>
    
            <img src="ico/googleplus.png" alt="ГуглПлюс"/>
    
            <img src="ico/youtube.png" alt="Ютуб"/>
        
            <img src="ico/mail.png" alt="Почта"/>
        </span>
    </footer>
а это на css:
CSS
1
2
3
4
5
6
7
8
9
.right {
float: right;   
}
.left {
    float: left;
}
footer img {
width: 5%;
}
Дело в чем, Я добавляю одну иконку и она прижата к правой стороне, а как только добавлю еще одну, она потихоньку съезжает в левую сторону. Ну и конечно добавленные пять картинок, они полностью все на левой стороне. И даже размер картинок с помощью width не изменить. Что делать? Или тут еще может зависить от всего кода что есть?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
02.01.2018, 15:41
Ответы с готовыми решениями:

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

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

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

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

2
Богатый духовно
455 / 262 / 145
Регистрация: 10.03.2015
Сообщений: 1,058
02.01.2018, 21:47 2
Shaxmir, Сделайте пример в песочнице codepen.io
0
275 / 269 / 106
Регистрация: 12.01.2016
Сообщений: 1,574
02.01.2018, 22:47 3
Я бы так сделал.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<footer>
  <div class="wrapper">
    <div class="block_icon">
        <div>
            <i class="fa fa-address-book" aria-hidden="true"></i>
        </div>
        <div>
            <i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i>
        </div>
        <div>
            <i class="fa fa-microchip" aria-hidden="true"></i>
        </div>
        <div>
            <i class="fa fa-envelope-open" aria-hidden="true"></i>
        </div>
        <div>
            <i class="fa fa-id-card" aria-hidden="true"></i>
        </div>
    </div>  
    <div class="footer_text">
        <p>&copy; Все права защищены</p>
    </div> 
  </div>            
</footer>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrapper {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto; 
}
 
.block_icon div {
    display: inline-block;
    float: right;
}
 
.fa {
    font-size: 25px;
    margin-right: 30px; 
}
 
.footer_text {
    float: left;
    display: inline-block;
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
02.01.2018, 22:47

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

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

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

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

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


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

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

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