пятница, 15 февраля 2019
10:21

аватар и подпись

все записи пользователя в сообществе SnezhArt
don't keep calm and fuck them all
доброго дня!

у некоторых пользователей нет аватаров. в этом случае вместо аватара пустое место, а подпись соответственно улетает ввысь.
кто-нибудь знает, как провернуть фокус с аватаром, чтобы вместо пустоты, когда нет аватара у пользователя, стоял аватар, припасенный мною на этот случай, ну и подпись тогда бы не улетала?




UPD: вопрос решен. спасибо  ~Erika и  Tenno Seremel!!


@темы: основные блоки

URL
Комментарии
15.02.2019 в 15:08

birdroid
Сдается мне, что без помощи джаваскрипта такое не провернуть
URL
15.02.2019 в 16:40

Tenno Seremel
🧊🔥
Можно накостылять что-нибудь такое, есть у постов/комментариев какой-то простой фон есть (цвет):



Правда расстояние между подписью и аватаркой будет зависеть от размера аватарок.

Если бы браузеры поддерживали :has() было бы повеселее.
URL
16.02.2019 в 00:25

~Erika
Победа! Честь! Судьба! Баранина!
Это две несвязанные проблемы.
Чтобы подпись не улетала - можно обойтись и без своей картинки вместо аватарки, но для этого придётся немного переписать код для .commentAuthor, .avatar и .sign.
Картинку на месте отсутсвующей аватарки можно сделать через .commentAuthor:before {background: url(картинка)}. Если сделать :before размером с аватарку и спозиционировать на то же место - аватарка (если она есть) перекроет собой :before с картинкой. Это костыль, но работать будет.
URL
18.02.2019 в 07:17

SnezhArt
don't keep calm and fuck them all
Tenno Seremel, я вроде наковыряла этот костыль, но он не сединяется с моей черной черточкой под аватаркой. если ему прописывать мой бордер-боттом, то костыль ломается. %)

~Erika, придётся немного переписать код для .commentAuthor, .avatar и .sign
а не подскажете как? :shuffle2: вечно у меня косяк в этой теме и я не понимаю от чего зависит его правильная работа(

.commentAuthor:before {background: url(картинка)}
попробовала прописать. но почему-то не видно вообще этого комментА.:бефо :hmm:
URL
18.02.2019 в 09:30

Tenno Seremel
🧊🔥
SnezhArt, что-бы :before работало, нужно, чтобы внутри было свойство content, установленное не в none. Например, content: ""; плюс, вероятно, потребуется и display: block; т.к. по умолчанию это строчный блок.
URL
18.02.2019 в 11:25

SnezhArt
don't keep calm and fuck them all
Например, content: ""; плюс, вероятно, потребуется и display: block;
прописала, content:before стал виден. но тут оказалось что аватарка не перекрывает бефо, а встает следом внизу. и бордер-боттом не встает как надо.:hmm:
URL
18.02.2019 в 11:35

Tenno Seremel
🧊🔥
SnezhArt, ну да, before это как ещё один блок в начале блока. На аватарку придётся вешать отрицательное значение margin-top, чтобы её подтянуть наверх (плюс, возможно, цвет фона).
URL
18.02.2019 в 12:18

SnezhArt
don't keep calm and fuck them all
общими усилиями наковыряла как-то так и все встало:


единственное, что бьет по перфекционистским чувствам:
у людей, кто без аватарки, подпись на 2 мм выше, чем стандартно. но тут уже видимо придется смириться или дождаться совета от ~Erika, почему у меня едут подписи))

Tenno Seremel, ~Erika, спасибо большое!!!
URL
19.02.2019 в 00:01

~Erika
Победа! Честь! Судьба! Баранина!
SnezhArt, да, работает так, как я и задумывала. А чтобы подпись и чёрная полоска под аватаркой не прыгали, напишите для .commentAuthor div {margin: 0;}, а затем для .sign {margin-top: 10px !important;} - тогда их положение должно стать одинаковым для всех.
URL
19.02.2019 в 08:08

SnezhArt
don't keep calm and fuck them all
~Erika, все теперь идеально. спасибо огромное!!!
URL