Смещение иконок соцсетей при уменьшении ширины экрана

@Тарасян · Регистрация: 05.01.2019

Студворк — интернет-сервис помощи студентам

проблемка такая, есть относительно позиционированный "подвал", в нём абсолютно позиционированные div-ы с иконками-ссылками соцсетей, при уменьшении ширины экрана они начинают сближаться и в итоге "налазить" друг на друга, в чём может быть проблема?

HTML5
1
2
3
4
5
6
7
8
   <footer class="footer">
     <div class="vkontakte">
        <a href="#" target="_blank"><img src="images/VK.ico"></a></div>
      <div class="facebook">
        <a href="#" target="_blank"><img src="images/Facebook.ico"></a></div>
      <div class="email">
        <a href="#" target="_blank"><img src="images/Email.ico"></a></div>
     </footer>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 .footer {
    position: relative;
    background: #778899;
    width: 100%;
    height: 100px;
      .vkontakte {
    position: absolute;
    bottom: 29%;
    right: 50.6%;
}
.facebook {
    position: absolute;
    bottom: 29%;
    right: 47.8%;
}
.email {
    position: absolute;
    bottom: 29%;
    right: 45%;
}

@gogolik · 18.01.2019, 11:39

В абсолютном позиционировании в процентах. Очевидно же.

@Тарасян · 18.01.2019, 15:09 **[ТС]**

???

@gogolik · 18.01.2019, 16:28

Тарасян, давайте вспомним школьный курс математики.
У футера ширина 100%. Допустим, это будет 1920px.
Отступы в процентах. 50.6% от 1920 примерно 972, 47.8% примерно 918, 45% ровно 864.
Допустим, что иконка 30px в ширину. Первая иконка будет от 972 до 942 пикселя, вторая от 918 до 888, третья от 864 до 834. Всё гуд, ничего не налезает.
Теперь же возьмем экран 1024px шириной. 50.6% примерно 519, 47.8% примерно 490, 45% примерно 461.
Соответственно, первая иконка будет от 519 до 480, вторая от 490 до 460, третья от 461 до 431. Есть пересечения, поэтому они налезают друг на друга. Почему они не двигаются? Потому что идём читать про абсолютное позиционирование и как оно работает.
Мой совет: переверстайте без абсолютного позиционирования, это просто порнография.

@Тарасян · 19.01.2019, 00:15 **[ТС]**

спасибо за ответ, но кроме ещё большей запутанности он ничего более не принёс, форум вроде как для подсказок и советов, а не выяснения кто круче

Добавлено через 1 минуту
я три недели в этой теме только

@gogolik · 19.01.2019, 01:24

Тарасян, это не выяснения кто круче. Это попытка заставить вас мыслить в верном направлении. Перечитайте ещё раз предыдущее сообщение, я не знаю как ещё проще объяснить ошибку в таком позиционировании и вёрстке. Завтра, если не буду лениться, скину пример как нужно делать. А пока - думайте.

Qwerty_Wasd · 19.01.2019, 01:38

Тарасян, если выключить эмоции из уравнения, gogolik дал Вам развернутый бриф проблемы. Для Вашего понимания дал, не себе. А также предложил вариант решения.
Теперь что касаемо

Сообщение от Тарасян

форум вроде как для подсказок и советов

если перейти по ссылке -
https://www.cyberforum.ru/abou... ment8.html - можно будет ознакомится с концепцией форума.
А здесь с правилами форума - https://www.cyberforum.ru/announcement.php?a=3
Ознакомившись, Вы по новому взглянете на свою же тему, и на пост gogolik.

Сообщение от Тарасян

я три недели в этой теме только

Ссылки на официальную документацию -
https://www.w3.org/
https://w3c.github.io/

Ресурсы для начального изучения -
https://developer.mozilla.org/ru/
https://webref.ru/

Ну и напоследок - https://jsfiddle.net/Qwerty_Wasd/2n476ed0/

HTML5
1
2
3
4
5
6
7
8
<footer class="footer">
    <div class="vkontakte marg">
        <a href="#" target="_blank"><img src="https://www.cyberforum.ru/images/VK.ico"></a></div>
    <div class="facebook marg">
        <a href="#" target="_blank"><img src="https://www.cyberforum.ru/images/Facebook.ico"></a></div>
    <div class="email marg">
        <a href="#" target="_blank"><img src="https://www.cyberforum.ru/images/Email.ico"></a></div>
</footer>

CSS
1
2
3
4
5
6
7
8
9
10
11
.footer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    background: #778899;
    height: 100px;
}
.marg {
    margin: 0 10px;
}

@Тарасян · 19.01.2019, 10:45 **[ТС]**

спокойствие парни. я просто хотел сказать что наверное если человек новичок или чего-то не понимает можно как-то корректней объяснить ему что данный способ "полная туфта" и посоветовать изучить альтернативный способ, т.е. дать дельный совет, а всё остальное на мой взгляд выглядит так: "ты новичок, тебе нечего ловить в программировании, это не твоё, ты ничего не понимаешь, у тебя ничего не получится, программистами не становятся а рождаются, пошёл вон из нашего мира!" вот и всё что я хотел сказать. нет никакого негатива. просто своё мнение высказал.

Добавлено через 19 минут
Qwerty_Wasd, на счёт использования flexbox-a я думал, но как быть если в footer-e помимо трёх "иконок" еще располагается разного вида информация и она должна располагаться в разных местах, на разных уровнях?

Qwerty_Wasd · 19.01.2019, 13:03

Тарасян,

Сообщение от Тарасян

еще располагается разного вида информация

А почему же Вы не предоставили в тему всю структуру поддерева, с которым не смогли справиться? Мы же обычные люди в конце концов, у нас нет физической возможности читать Ваши мысли или переносить сознание к Вашему ПК.

Выложите сюда код футера. ВЕСЬ. И опишите или нарисуйте - как Вы его видите.

@Тарасян · 19.01.2019, 15:25 **[ТС]**

Qwerty_Wasd,

HTML5
1
2
3
4
5
6
7
8
9
10
11
<footer class="footer>
 <div class="image"><img src="teteytey"></div>
 <div class="copyright">&copy; teteytey</div>
 <div class="vkontakte">
        <a href="#" target="_blank"><img src="VK.ico"></a></div>
      <div class="facebook">
        <a href="#" target="_blank"><img src="Facebook.ico"></a></div>
      <div class="email">
        <a href="#" target="_blank"><img src="Email.ico"></a></div>
 <div class="reiting"><a href="#">teteytey</a></div>
 <div class="metrika"><a href="#">teteytey</a></div>

Qwerty_Wasd · 19.01.2019, 19:00

Тарасян, отвлекаясь ненадолго от темы, хочу Вас нижайше, но НАСТОЯТЕЛЬНО, попросить почитать всё-таки материал на ресурсах, ссылки на которые я предоставил Вам в п.7

Обратите внимание на свой код, отсутствует кавычка в атрибуте класса, строка 1; не закрыт тег футера.

Также обратите внимание на изменения в дереве - https://codepen.io/qwerty_wasd/pen/yGmMMG

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<footer class="footer">
  <div class="container-logo"><img class="image" src="https://dummyimage.com/100x100/ababab/000000.png&amp;text=logo" alt=""/>
    <div class="copyright">© teteytey</div>
  </div>
  <div class="container-icons">
    <div class="vkontakte marg"><a href="#" target="_blank"><img class="image c-border" src="https://dummyimage.com/50x50/ababab/000000.png&amp;text=VK" alt=""/></a></div>
    <div class="facebook marg c-border"><a href="#" target="_blank"><img class="image c-border" src="https://dummyimage.com/50x50/ababab/000000.png&amp;text=f" alt=""/></a></div>
    <div class="email marg c-border"><a href="#" target="_blank"><img class="image c-border" src="https://dummyimage.com/50x50/ababab/000000.png&amp;text=msg" alt=""/></a></div>
  </div>
  <div class="container-counters">
    <div class="reiting"><a href="#">teteytey</a></div>
    <div class="metrika"><a href="#">teteytey</a></div>
  </div>
</footer>

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
*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.footer {
  border: 2px solid #000000;
  display: flex;
  flex-flow: row nowrap;
}
.footer .container-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #000000;
  flex-grow: 1;
}
.footer .container-counters,
.footer .container-logo {
  align-self: center;
}
 
.marg {
  margin: 0 5px;
}
 
.c-border {
  border-radius: 50%;
}

@Тарасян · 20.01.2019, 16:40 **[ТС]**

Qwerty_Wasd, спасибо, в реале все кавычки и теги закрыты. получается что с помощью flexbox-a можно почти весь сайт сверстать?

Qwerty_Wasd · 20.01.2019, 17:27

Тарасян, не за что )

Сообщение от Тарасян

с помощью flexbox-a можно почти весь сайт сверстать?

запросто. А еще можно комбинировать технологии.

@Тарасян · 20.01.2019, 21:15 **[ТС]**

Qwerty_Wasd, так в итоге для чего лучше позиционирование использовать?

Qwerty_Wasd · 20.01.2019, 21:36

Не по теме:

Тарасян, да нет никаких лучше\хуже. Каждое правило CSS предназначено для определенных целей.
Прочитайте про любое, вопросы отпадут сами собой. Например position - открываем документацию, https://www.w3.org/TR/css-position-3, и читаем.
Читая, Вы узнаете, что даже если Вы не указали явно правило, по умолчанию используется position:static;.
Также Вы поймете, что элементы позиционируются ВСЕГДА относительно чего-то. А вот относительно чего - указывается правилом position. По-умолчанию используется

Сообщение от W3C

In CSS, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block.

то есть положение рассчитывается относительно блока, что содержит элемент. То есть родительского. А если задать position: relative то положение элемента будет рассчитываться, относительно его нормального положения. А не относительно родителя, как думает большинство людей, что изучают ту или иную технологию с помощью каких-то недоблогеров.

Не по теме:

На заметку кстати - никто не даст Вам больше информации о той технологии или продукте, что Вы используете, чем разработчик этих технологии\продукта.

@Тарасян · 20.01.2019, 21:40 **[ТС]**

Qwerty_Wasd, ясно, благодарю

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Смещение иконок соцсетей при уменьшении ширины экрана

Решение

Решение

@gogolik Супер-модератор 3953 / 2064 / 829 Регистрация: 13.03.2010 Сообщений: 6,786
	18.01.2019, 11:39
	В абсолютном позиционировании в процентах. Очевидно же. 0

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	18.01.2019, 15:09 [ТС]
	??? 0

@gogolik Супер-модератор 3953 / 2064 / 829 Регистрация: 13.03.2010 Сообщений: 6,786
	18.01.2019, 16:28
	Тарасян, давайте вспомним школьный курс математики. У футера ширина 100%. Допустим, это будет 1920px. Отступы в процентах. 50.6% от 1920 примерно 972, 47.8% примерно 918, 45% ровно 864. Допустим, что иконка 30px в ширину. Первая иконка будет от 972 до 942 пикселя, вторая от 918 до 888, третья от 864 до 834. Всё гуд, ничего не налезает. Теперь же возьмем экран 1024px шириной. 50.6% примерно 519, 47.8% примерно 490, 45% примерно 461. Соответственно, первая иконка будет от 519 до 480, вторая от 490 до 460, третья от 461 до 431. Есть пересечения, поэтому они налезают друг на друга. Почему они не двигаются? Потому что идём читать про абсолютное позиционирование и как оно работает. Мой совет: переверстайте без абсолютного позиционирования, это просто порнография. 1

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	19.01.2019, 00:15 [ТС]
	спасибо за ответ, но кроме ещё большей запутанности он ничего более не принёс, форум вроде как для подсказок и советов, а не выяснения кто круче Добавлено через 1 минуту я три недели в этой теме только 0

@gogolik Супер-модератор 3953 / 2064 / 829 Регистрация: 13.03.2010 Сообщений: 6,786
	19.01.2019, 01:24
	Тарасян, это не выяснения кто круче. Это попытка заставить вас мыслить в верном направлении. Перечитайте ещё раз предыдущее сообщение, я не знаю как ещё проще объяснить ошибку в таком позиционировании и вёрстке. Завтра, если не буду лениться, скину пример как нужно делать. А пока - думайте. 1

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	19.01.2019, 10:45 [ТС]
	спокойствие парни. я просто хотел сказать что наверное если человек новичок или чего-то не понимает можно как-то корректней объяснить ему что данный способ "полная туфта" и посоветовать изучить альтернативный способ, т.е. дать дельный совет, а всё остальное на мой взгляд выглядит так: "ты новичок, тебе нечего ловить в программировании, это не твоё, ты ничего не понимаешь, у тебя ничего не получится, программистами не становятся а рождаются, пошёл вон из нашего мира!" вот и всё что я хотел сказать. нет никакого негатива. просто своё мнение высказал. Добавлено через 19 минут Qwerty_Wasd, на счёт использования flexbox-a я думал, но как быть если в footer-e помимо трёх "иконок" еще располагается разного вида информация и она должна располагаться в разных местах, на разных уровнях? 0

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	20.01.2019, 16:40 [ТС]
	Qwerty_Wasd, спасибо, в реале все кавычки и теги закрыты. получается что с помощью flexbox-a можно почти весь сайт сверстать? 0

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	20.01.2019, 21:15 [ТС]
	Qwerty_Wasd, так в итоге для чего лучше позиционирование использовать? 0

@Тарасян -10 / 1 / 0 Регистрация: 05.01.2019 Сообщений: 47
	20.01.2019, 21:40 [ТС]
	Qwerty_Wasd, ясно, благодарю 0