Вопрос №55327 от пользователя Татьяна Первых в испытании «Вкладки»

Татьяна Первых

Здравствуйте!подскажите, пожалуйста...https://ru.hexlet.io/code_reviews/416234

  1. не могу текст ссылок отцентровать над колонками автоматически, иначе они становятся раздельно 2."При наведении или фокусе на ссылке должна появиться соответствующая вкладка". наверно нужно выбрать родственный элемент по селектору, но не совсем понимаю как. возможно с div не все в порядке , разная вложенность
5 0

Nikita Mikhaylov

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

Тут есть пара вещей, на которые стоит обратить внимание:

  1. У нас всё происходит в рамках трёх колонок. Например, для ссылок нет нужды в дополнительном диве. Ведь их три, и колонок у нас три. Всё сходится :)
  2. Да, вы действительно не сможете сделать селектор до табов из таких ссылок. Дело в том, что CSS не умеет искать в селекторах своих родителей. Отталкивайтесь от этого. Продумайте, как может выглядеть селектор и, исходя из этого, организуйте вёрстку
1

Татьяна Первых

Nikita Mikhaylov, 1. убрала вложенность ссылок, но размер строки не растягивается на все колонки. 2. видимые размеры ссылок снизу съедаются , при наведении не видно выделение. 3. пыталась применить селекторы, на одном уровне все работает. но в условии сказано, что вкладки находятся внутри контейнера .tabs-content, а это уже получается разная вложенность

0

Nikita Mikhaylov

Убрала вложенность ссылок, но размер строки не растягивается на все колонки.

По своей сути колонки сделали своё дело. Но ссылки — элемент строчный, то есть их ширина равняется ширине контента. Подумайте, как можно это подправить и тогда ссылки встанут правильно

Видимые размеры ссылок снизу съедаются , при наведении не видно выделение.

Здесь поможет прошлый совет :)

пыталась применить селекторы, на одном уровне все работает. но в условии сказано, что вкладки находятся внутри контейнера .tabs-content, а это уже получается разная вложенность

Подумайте, каким образом мы можем селекторами выбрать нужный элемент. Распишите мне прям пошагово:

  • Наводим курсор на ссылку HTML
  • Селектором выбираем ....

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

1

Татьяна Первых

Nikita Mikhaylov, Спасибо! вроде бы все сделала, при наведении на ссылки появляются блоки, но тесты все равно не проходят... что не так?

0

Nikita Mikhaylov

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

Об этом прямо сообщает вот эта часть вашего селектора: :hover:focus. Сделайте так, чтобы можно было и при наведении показывать блок и при фокусе. То есть вам нужно будет несколько селекторов вместо одного такого. А разделить их можно с помощью запятой

1

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
1 июня 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
1 июня 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
1 июня 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
1 июня 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
1 июня 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
1 июня 5 месяцев