1

Мне надо сделать такую шапку

введите сюда описание изображения

У Меня пока получается так:

введите сюда описание изображения

Как выровнять пункт "О проекте" ?

Вот разметка и стили меню

* {
  padding: 0;
  margin: 0;
  border: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:focus,
:active {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: $font-family;
}

input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}

.header__container {
  display: flex;
  align-items: center;
  height: 75px;
  position: relative;
}

.header__logo {}

.header__menu {}

.menu {
  flex: 1 1 auto;
  padding: 30px/950px*100%;
}

.menu__icon {}

.icon-menu {
  display: block;
  position: absolute;
  top: 18px;
  right: 10px;
  width: 30px;
  height: 18px;
  cursor: pointer;
  z-index: 5;
  span {
    display: none;
    background-color: #1c242a;
  }
}

.menu__body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.menu__list {
  display: flex;
  justify-content: center;
  li {
    margin: 0px 15px;
  }
}

.menu__link {
  letter-spacing: 1.4px;
  color: #fff;
  text-transform: uppercase;
  @media (min-width: 992px) {
    &:hover {
      text-decoration: underline;
    }
    ;
  }
}
<header class="header">
  <div class="header__container _container">
    <a href="" class="header__logo"><img src="img/logo.png" alt=""></a>
    <nav>
      <div class="header__menu menu">
        <div class="menu__icon icon-menu">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="menu__body">
          <ul class="menu__list">
            <li><a class="menu__link" href="">Главная</a></li>
            <li><a class="menu__link" href="">Аукцион</a></li>
            <li><a class="menu__link" href="">О проекте</a></li>
            <li><a class="menu__link" href="">Партнерам</a></li>
            <li><a class="menu__link" href="">Контакты</a></li>
          </ul>
        </div>
      </div>
    </nav>

Обнуляющий стиль тоже подключен

Дело в том, что делаю все по уроку 20-я минута, в точности переписал стили оттуда. Шрифт подключил тот же.

Шрифт подключился PFDin Как в уроке

введите сюда описание изображения

Шрифт из урока точно подключен. Вот скрин.

введите сюда описание изображения

Все шрифты у меня собирает и конвертирует gulp. Пути правильные.

3 ответа 3

1

Ваш шрифт на вёрстке отличается от шрифта на макете (Ваш скрин 1). Попробуйте использовать точно такое же семейство шрифтов и все параметры для него(размер, начертание, letter-spacing). Нужно убедиться, что шрифт подключился 100%. Отследить можете через панель разработчика в браузере ctrl + shift + i(Рисунок 1). В хромоподобных браузерах можете открыть таким же способом консоль и выбрать элемент dom, после чего вкладка computed(Рисунок 2) консоль firefox Рисунок - 1

консоль opera Рисунок - 2

рисунок 3 Рисунок - 3

2
  • Добавил скрин, что шрифт подключен 16 окт 2020 в 12:51
  • Попробуйте убедиться в правильности указанных путей к файлу шрифта. Если шрифт подключен через Ваш css, то вкладка Все шрифты должна выглядеть примерно таким образом: смотрим рисунок 3 16 окт 2020 в 13:05
0

Оригинал макета похож на платный шрифт Catorze27 Style 1 SemiBold by Scannerlicker.

У вас же всё свёрстано другой гарнитурой с большим letter-spacing.

7
  • Дело в том, что при изменение letter-spacing, и размера шрифта для li ничего не дает. 16 окт 2020 в 13:00
  • С чего бы это letter-spacing не работать? Вы его как задаёте?
    – Quazimorda
    16 окт 2020 в 13:09
  • У класса menu__link уменьшаю. Он уменьшается, но пункт О проекте все равно остается в две строки Свойство работает но проблему не решает 16 окт 2020 в 13:12
  • Ну вы изначально используете другой шрифт(Roboto, кажется) и вероятно на нём letter-spacing не так заметен. Кроме того, нужно следить за тем, не задана ли у вас жёстко ширина этих элементов списка.
    – Quazimorda
    16 окт 2020 в 13:19
  • Ну, я использую шрифты из урока по верстке (ссылка в вопросе). У автора те же шрифты, но у него меню в одну строку... 16 окт 2020 в 13:28
0

Разобрался. Проблема была в html разметке. Мешал div с классом icon-menuвнутри nav. Переделал разметку на такую:

<header class="header">
    <div class="header__container _container">
        <div class="icon-menu">
                    <span></span>
                    <span></span>
                    <span></span>
        </div>
        <a href="" class="header__logo"><img src="img/logo.png" alt=""></a>
        
            <div class="header__menu menu">
            <nav>
                <div class="menu__body">
                    <ul class="menu__list">
                        <li><a class="menu__link" href="">Главная</a></li>
                        <li><a class="menu__link" href="">Аукцион</a></li>
                        <li><a class="menu__link" href="">О проекте</a></li>
                        <li><a class="menu__link" href="">Партнерам</a></li>
                        <li><a class="menu__link" href="">Контакты</a></li>
                    </ul>
                </div>
            </div>
        </nav>

1
  • вам надо было отменить перенос слов через пробел. white-space: nowrap и всё работало бы 20 окт 2020 в 8:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.