Создание семантической разметки по макету. Кейс 6

Добрый день!
Подскажите, пожалуйста, какие семантические элементы использовать, чтобы достичь сдвига по вертикали при проверке разметки документа:

  1. в логотипе в хедере

    мой код:
    <body><header><a><img src="img/logo.svg" alt="Проект «Пантеон».Logo" width="180" height="90"></a></header>

и
2) для достижения отступов и пространства между парами dt/dd в секции “факты”

Добрый день!

  1. Логотипу задайте размеры 180 на 50 пикселей;
  2. Каждую пару из списка определений нужно обернуть в контейнер. Исходя из макета, можно сделать вывод, что контейнеры понадобятся в дальнейшем для горизонтального позиционирования при стилизации.

Спасибо. Это помогло

Спасибо. в этой конкретной проблеме помогло, но, наверное, надо как-то обозначить применяемое решение, чтобы прохождение задания не превращалось в игру “угадай настроение верстальщика”, тем более, что. в аналогичных ситуациях в кейсах 7 и 3 такого решения не применялось ( и это не одна такая нестыковка :slight_smile: )

но теперь появилась другая проблема:
подскажите что не так с картинкой для превьюшки?
начиная в неё идет общее смещение формы :frowning:
в папке с картинками ее исходный размер 2000*1000, и последние несколько итераций проверок превратились в игру “угадай размер превьюшки” :frowning:

Изображения для превью должны быть вставлены посредством тега video.
Размер первого изображения 580 на 290 пикселей.
Размер второго изображения 1139 на 572 пикселя.
Я посоветуюсь с авторами и, возможно, мы поменяем размеры изображений в эталоне, дабы не приходилось более угадывать размеры изображений. В других кейсах так сделали, а здесь, видимо, пропустили.

Спасибо, помогло.
Конечно, это был тег video, но я не угадал с шириной изображения. при сравнении двух макетов подобрать высоту более-менее просто, а вот с шириной - никак.
Размеры изображения в исходниках поменять нужно обязательно, поскольку с самого первого кейса вы делаете упор только на семантику, а не визуальное соответствие макету (самый яркий пример: кейс 7 с его круглыми изображениями фото пользователей на макете и обычными фотками в итоговом решении)
Также в кейсе 6 желательно как-то обозначить, что вот это (рисунок ниже) - форма отправки имени, а НЕ рекламный слоган со ссылкой на страницу с договором и оплатой, как можно подумать. (какой в этом практический смысл, мне не ясно, но автор эталонного решения так настаивает).

Извините, еще глупый вопрос: как отметить прохождение кейсов 4 и 7?
В кейсе 1 есть соответствующая кнопка, а в этих - нет. Просмотр демонстрации решений по всем страницам также не приводит к смене “статуса”.

Над отметкой прохождения сейчас работаем. В ближайшее время этот функционал станет доступен.
Все ваши пожелания по кейсам выше я передам на обсуждение авторам. Спасибо вам за развёрнутую обратную связь.

:slight_smile:

Добрый день.
Подскажите, пожалуйста, как добиться того, чтобы кнопка “Я готов лететь” была снизу, а не сбоку в верстке без потери ее бокового положения при просмотре сайта?

Добрый день! Обратите внимание в ответе на расстояние между “$500 к” и “Имя” :slight_smile:
Т.е. требуется обрамление “500 к” в отдельный тег, чтобы потом можно было задать свой стиль начертания.
после добавления тега расстояние раздвинется и кнопка сама “перейдет” на следующую строку.

UPD:
PS. В этих заданиях специально переносы расставлять не нужно. при правильной семантической разметке все проверки проходят нормально.
Другое дело, что в некоторых решениях очень неоднозначное понятие о “правильности” :slight_smile:

т.е. мне необходимо сделать 2 тега label?

Нет, зачем.
но текст внутри label, как понимаю спецификацию, может содержать другие теги, относящиеся к Phrasing content, и влияющие только на оформление, например <label for="блабла"><span>txt1</span><span>txt2</span></label>
А ещё “$ 500k” может не являться частью <label> и быть просто текстом внутри формы:
<span>$ 500k</span> <label>Имя</label>
В 6м кейсе применяется второе решение…

Понял. Большое Вам спасибо!)

Обернул 500к в span, Имя оставил в label,но кнопка не подвинулась, хотя в версте расстояние стало как надо. В чем может быть проблема?

Скриншот 01-11-2020 19_01_33

Да. у меня так же и проверка проходит нормально.
а если ваш вариант отправить на проверку - какой результат сравнения?

Проверка прошла) Еще раз спасибо. Без Вашей помощи я бы замучался искать решение. Вроде все перепробовал)

Если я смотрю на своей локальной машине, то результат такой же как у вас - переноса нет.
Но если отправить на проверку, то проверочный автомат сам заново подключит стили и результат визуально будет выглядеть по-другому. В этих задачах надо смотреть на семантику, а не на расположение элементов :slight_smile:


Пожалуйста :slight_smile: