Не получается сделать шапку сайта(html css).Не могу расставить элементы в шапке

Question

Всем доброго времени суток! Помогите пожалуйста сделать шапку сайта(макет в Figma).Брать левый вариант. Надо использовать позиционирование relative. Сама проблема: у меня не получается расположить элементы шапки так, как в макете. Я новичок в frontend, поэтому прошу вас скинуть код и объяснение к нему. Заранее спасибо

Answer 1

Не вижу смысла использовать тут position: relative
Объясню как сделал я.

Сразу скажу что я использовал обнуляющие стили
Коротко об этом Cовременный сброс

На макете мы видим, что в шапке элементы выстроены в таком типо контейнере, но в то же время заливка в шапке должна быть до краёв экрана (каким бы экран не был), значит внутри header и контейнер с блоками

<body>
    <header class="header">
        <div class="container">
            <!-- тут будет разметка шапки -->
        </div>
    </header>

Далее для удобства будет использовать список ul
То что справа элементы это я предполагаю будут ссылки, поэтому вставляем его в li
*Также добавим первому элементу шапки(наше лого) класс .logo, опять же для удобства

<ul class="menu">
                <li class="menu_item logo">
                    <img src="logo.png" alt="logo">
                </li>
                <li class="menu_item">
                    <a href="#">the problem</a>
                </li>
                <li class="menu_item">
                    <a href="#">PiedPiperCoin</a>
                </li>
                <li class="menu_item">
                    <a href="#">the team</a>
                </li>
            </ul>

Когда разметка завершена приступаем к стилям.
Из figma можно высчитать ширину всего контейнера, она 1110 пикселей, сделаем контейнер с такой шириной
Укажем контейнеру что все блоки будут по центру (свойство margin)

.container 
{
    width: 1110px;
    margin: 0 auto;
}

Высота всей шапки 84px, устанавливаем фон

.header
{
    background-color: #007765;
    height: 84px;
}

Т.к. все элементы находятся ровно по центру шапки(вертикаль), то чтобы не морочиться с margin'ами используем свойство display: flex и align-items: center (второе без первого работать не будет)
Также указываем родителю списка (ul.menu) что его высота будет такая же как высота header (84px), это нужно для того чтобы выравнивание по вертикали было ровным.

ul.menu
{
    display: flex;
    align-items: center;
    height: 84px;
}

Скажем нашему лого чтобы все элементы отступили от него на 502 пикселя (согласно отступу из figma)

.menu_item.logo
{
    margin-right: 502px;
}

Теперь, когда все элементы выстроены, займёмся стилизацией правой части

.menu_item a
{
    font-size: 24px; /*Согласно figma размер шрифта 24px*/
    color: #fff;  
    text-decoration: none; /*Отменяем стандартную стилизацию ссылок, их подчёркивание*/
    padding-right: 10px;  /*Справа и слева делаем отступ по 10px*/
    padding-left: 10px;
    border-right: 2px solid #fff; /*Справа делаем что-то типо разделителя*/
}

ul.menu .menu_item:last-child a
{
    border: none; /*У последнего элемента отменяем разделитель (его нет в макете)*/
}

Добавляем анимацию при наводке

.menu_item:hover
{
    text-decoration: underline;
}

БЛОГ НА HUSL

Не получается сделать шапку сайта(html css).Не могу расставить элементы в шапке

Ответы (1 шт):