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

Ссылка скопирована
CSS HTML PHP
7 января 2026 1 ответ

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

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

touch me !

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

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

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

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

Дополнительно:

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

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

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

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

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

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

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

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

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

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

  • imko,

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

    Да

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

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

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

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

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

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Мария Код Ответ

    Для верстки информации о пользователе в шапке сайта можно использовать различные подходы, в зависимости от дизайна и функционала сайта. Ниже приведу пример верстки информации о пользователе с использованием HTML и CSS:

    HTML:

    <header class="header">
    <div class="user-info">
        <img src="avatar.jpg" alt="User Avatar" class="avatar">
        <div class="user-details">
            <h3 class="username">John Doe</h3>
            <p class="user-role">Administrator</p>
        </div>
    </div>
</header>

    <header class="header"> <div class="user-info"> <img src="avatar.jpg" alt="User Avatar" class="avatar"> <div class="user-details"> <h3 class="username">John Doe</h3> <p class="user-role">Administrator</p> </div> </div> </header>

    CSS:

    .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
}
 
.user-info {
    display: flex;
    align-items: center;
}
 
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
 
.user-details {
    text-align: left;
}
 
.username {
    margin: 0;
    font-size: 16px;
}
 
.user-role {
    margin: 0;
    font-size: 14px;
}

    .header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333; color: #fff; } .user-info { display: flex; align-items: center; } .avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .user-details { text-align: left; } .username { margin: 0; font-size: 16px; } .user-role { margin: 0; font-size: 14px; }

    В данном примере мы создаем блок header с классом "header", внутри которого находится блок "user-info" с аватаркой пользователя и информацией о нем (имя и роль). С помощью CSS мы задаем стили для шапки сайта, аватарки, имени и роли пользователя.

    Это простой и эффективный способ сверстать информацию о пользователе в шапке сайта. Можно также добавить дополнительные элементы, например кнопку выхода или ссылку на профиль пользователя, в зависимости от потребностей проекта.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ JavaScript Как мне в данном запросе обработать ошибку с определенным статусом? 1 ответ