Вопросы по вёрстке


#1

Ребят добрый день/ночь/вечер.
Кто-нибудь знает, как расположить эти три объекта как на макете?


Я пытался сделать это при помощи таблицы || float || inline-block, но у меня всё время выходит что-то типа такого.


#2

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


#3

Посмотрите на скриншот. Выделенное является едиными сущностями, не нужно иконки выносит отдельной “строкой”:
http://joxi.ru/LmGRdP6CwNDkor
Как подсказывает Hierumo, лучше всего использовать flexbox. Карточкам можно задать ширину (размеры посмотрите с помощью направляющей сетки) и спозиционировать внутри родителя с помощью justify-content.


#4

Заранее извиняюсь, но если выделенные в красных прямоугольниках объекты являются едиными сущностями, как мне потом заставить кнопки “работать”, если они будут лишь на картинках? Или вы что-то другое имели ввиду? :sweat_smile:


#5

Спасибо большое. Вы вообще отдыхаете? Под любым вопросом я ваш ответ вижу. :grin:


#6

та я за компом сижу прост 24/7 практически, на телефон уведомляшки приходят, если вопрос простой - сразу отвечаю :sunglasses:


#7

Заранее извиняюсь, но если выделенные в красных прямоугольниках объекты являются едиными сущностями, как мне потом заставить кнопки “работать”, если они будут лишь на картинках? Или вы что-то другое имели ввиду? :sweat_smile:


#8

прост макет немного кривоват =)
я бы просто взял спрайт из этих картинок и каждой фиче приделал через background-position этот спрайт
а сами фичи на флексах


#9

Выделенное красным - единая сущность. Иконка, текст, кнопка - все это вместе, условно говоря, есть “карточка”. Именно эти “карточки” нужно расположить по горизонтали, а не отдельно взятые иконки. И уже внутри самих карточек позиционировать их составляющие - иконки, текст, кнопки.


#10

Я понял вас, спасибо!


#11

Получилось через флексы сделать. Спасибо.


#12

Ребят, ещё один вопрос. Не стал новую тему создавать.
Я пытаюсь сделать активным элемент при наведении на него мыши, с помощью :hover, пытаясь добиться того же результата, что и в макете. Но у меня ничего не получается. Что я делаю не так?:sweat_smile:


#13

Используйте codepen, гадание на скриншотах не лучшая затея.
Если вам нужен ховер-эффект для аватарки, то и вешайте его непосредственно на аватарку. Что такое thief?
Аватарки через background-image - зло. Что мешает использовать <img>?


#14

если очень упрощенно, то на:
https://jsfiddle.net/eqos6r7j/ (вместо местной няши подставляй любую другую рожицу =)

попробуй заодно повторить курсы про маски при наведении


#15

Я до этого ещё не дошёл.:sweat_smile:


#16

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


#17

Я столкнулся с такой проблемой, что не могу вникнуть в текст, который написан в теории (то ли он так написан, то ли я такой тупой) и просто тупо повторяю действия по алгоритму. И я заметил, что, пока я верстаю этот шаблон, я уже успел не раз применить float и влюбиться во flex, хотя я в эти темы вник с большим трудом, а флексы прошёл только первую часть. Просто мне нужно применять полученные знания или я просто всё забываю/не понимаю. :tired_face:


#18

Вау, спасибо. Так намного удобнее. :smiling_face_with_three_hearts:


#19

У всех так, ничего страшного. Терпение и труд…, как говорится.

Попробуй в голос читать - я серьезно. Если постоянно отвлекаешься на какие-то несущественные вещи - используй Метод помидора, хорошая штука против прокрастинации.


#20

Вау, я оказывается уже давно как помидор. Я разбиваю время так:
Занимаюсь 30 минут, потом 5 минут перерыв. Снова занимаюсь 30 минут, но уже перерыв 10 минут, потом снова 30/5 и т.д. И устраиваю себе в день два больших перерыва по 30 минут. Я поставил себе планку, меньше которой я не имею права заниматься, и это 240 минут (больше я просто не успеваю).