Как правильно сверстать информацию о пользователе в шапке сайта?

Question

[Muranx]

Здравствуйте!

Я сверстал примерную картину того, что мне нужно ..

touch me !

1. какой вариант из свёрстанных наиболее правильный?
2. как в будущем можно будет реализовать кастомные рамки для пользователей с различным статусом?
приходит в голову лишь тэги...

<img class="customBorder" src="rank_1_UserBorder"><img class="userLogo" src="userLogo_123">

которые имеют одного родителя, позиционированы абсолютно, размещены по центру родительского блока, и рамка будет шире по размеру, ну и z-index у неё будет меньше чем у логотипа юзера.

Comments

[Одиночка Айс]

Пользователи сами грузят аватарки? Если да - картинка + бордер на фоне/стилями, если нет - 2 вариант.

[Muranx]

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

[Ankhena]

Muranx, img это контентные изображения, без которых потеряется часть смысла.
Убираем стили, смотрим, что осталось. Без картинок не понятно => контентные. Всё ок => украшения (псевдоэлемент, а не пустой div).
Откуда и как при этом пользователи что-то грузят без разницы. Если не умеете пользоваться кастомными свойствами css, то ок, путь img и aria-hidden к ним.

userInfo - от этой обертки можно избавиться, заменив флекс на грид.

как в будущем можно будет реализовать кастомные рамки для пользователей с различным статусом?

Просто фон для обертки картинки.
Ну или псевдо (только гридами, а не абсолютом, по возможности)

[imko]

Ankhena, а что за тема с гридами вместо абсолюта? Ставить в одну ячейку то что я хочу наложить? Какие плюшки?

[Muranx]

Ankhena, блин с трудом вас понимаю !

Не понятно => контентные

Это вы имели ввиду , что картинки это контент, т.е. к примеру лицо пользователя это <img src="#"> а если это к примеру какая нибудь иконка декоративная , то можно и стилями background: url("url.png")отделаться?

Всё ок => украшения (псевдоэлемент, а не пустой div)

а это вы имели ввиду что пустому диву нельзя давать .div{ background: url("url.png"); такое свойство, т.е. нужно создавать псевдоэлемент для див блока, и уже ему давать свойство в виде урла картинки? Так?

[Ankhena]

imko,

Ставить в одну ячейку то что я хочу наложить?

Да

Какие плюшки?

Нет абсолюта, нет нового слоя, всё в потоке

[Ankhena]

Muranx, если без картинки теряется смысл происходящего, то картинка делается контентной.

а это вы имели ввиду что пустому диву нельзя давать .div{ background: url("url.png"); такое свойство, т.е. нужно создавать псевдоэлемент для див блока, и уже ему давать свойство в виде урла картинки? Так?

Я имела в виду, что если можно обойтись без лишних тегов, то это прекрасно. Пустой div для того, чтобы вставить фоновую иконку не нужен. Он легко заменяется на псевдо от blockLink.