Испытание: вертикальное меню [9/28]


#1

“Подсказка: все размеры и отступы кратны 5” - то, что написано в задании. Но в реальности, чтобы получить 100% и сдвинуть меню как в образце, нужно задать классу меню внешний отступ:
margin: 14px 0;

Или можно как-то иначе 100% получить?)


#2

Не пишите margin и всё будет кратно 5.


#3

Так если не написать margin для ul то он прилипает к верхнему краю и результат 93%.
Вот и приходится добавлть 14px сверху.

.main-menu {
    width: 200px;
    padding: 0;
    margin: 0;
    *margin-top: 14px;*
    }

.main-menu li {
    list-style: none;
    }
    
.main-menu a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 10px 15px;
    
    background-color:#2980b9;
    border-bottom: 2px solid #2c3e50;
    }
    
.main-menu .active a {
    background-color: #1abc9c;
    border-bottom: 2px solid #2ecc71;
    }

#4

Верхнюю строчку тоже комментируйте. Это ведь тоже margin.


#5

Зачем её комментировать? Я спросила как сделать отступ без этих 14px?
В задании написано что всё кратно 5, но 15px не подходит.


#6

У некоторых “текстовых” тегов есть отступы по умолчанию. Они не прописаны явно.
То есть, в данном случае вы не пишете свойство margin для списка меню, но отступ всё равно есть.


#7

Так можно выполнить задание на 100% и как-то обойтись без margin-top: 14px; ?


#8

В своем правиле для .main-menu вы не пишете свойство margin. Таким образом, в коде у вас всё кратно 5. Но отступ подразумевается и всё равно есть.


#9

Блин, наступил на те же грабли.
Предыдущие упражнения успели приучить не подвешивать список по умолчанию – все отступы обнуляем, всё переназначаем… И здесь бац…
Ещё один урок – доверяй, но проверяй!


#10

list-style: none; можно переместить в класс .main-menu.
аккуратнее получится.


#11
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: вертикальное меню</title>
    </head>
    <body>
        <ul class="main-menu">
        <li>Курсы</li>
        <li class="active">Демонстрации</li>
        <li>Участники</li>
        <li>Достижения</li>
        <li>Профиль</li>
        </ul>
    </body>
</html>

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 280px;
    min-height: 280px;
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #ecf0f1;
}

.main-menu {
    list-style: none;
    padding: 0;
    /*margin-top: 14px;*/
    width: 200px;
}

li {
    border-bottom: 2px solid #2c3e50;
    color: #ffffff;
    background: #2980b9;
    padding: 10px 15px;
}

.main-menu li:hover {
    background: #2ecc71
}

li.active {
    background: #1abc9c;
    border-bottom: 2px solid #2ecc71;   
}

Столкнулся с той же проблемой и делал те же самые 14px :grinning:
Но, Ваш, комментарий выручил. Благодарю.

Но у меня еще один вопрос, я расположил .main-menu li:hover выше чем li.active и все же, при наведении на активное состоянии (Демонстрации), пункт все равно подсвечивается. А как я понял из предыдущего урока, этого быть не должно.

В третьей цели правило .main-menu a:hover нужно расположить перед .main-menu .active a .


#12

Это не меню… Где Ваши ссылки?


#13

Это не меню… Где Ваши ссылки?

В силу лени, единственное, я ссылки не добавил, во всем остальном смысл абсолютно такой же.
Так что, не считаю это грубой ошибкой. Я хочу сказать, что от добавления мною ссылок, смысл кода не поменяется. Имитация режима меню присутствует. Если добавить ссылки, они все равно не рабочие (якоря).


#14

:blush: делайте, выкладывайте, обсудим (для меня было не всё так просто).


#15

:blush: делайте, выкладывайте, обсудим (для меня было не всё так просто).

Так я же выше уже выложил :blush:
Этим кодом, собственно, и прошел на 100%.

https://jsfiddle.net/akabeerka/8nxgvdm8/4/ - Можно тут протестировать, что я накодил :grinning:


#16

А, я прошёл на 100% этим кодом: http://codr.io/7oiuxcp

Ну, да! Ничего не выбирается – всё равно там были бы пустые якоря.
Ничего не подсвечивается, не меняется форма курсора, не нужно никаких :hover :active :link.
Нафига, если и так 100%?


#17

А, я прошёл на 100% этим кодом: http://codr.io/7oiuxcp

Во-первых, я не просил оценивать мой код. Во-вторых, Вы не мой работодатель или заказчик, чтобы придираться к этому. В третьих, у меня там все отлично подсвечивается, а про изменение курсора (как раз таки те самые ссылки) в задании ничего сказано не было.

вот Вам hover, вот Вам active:

Мы здесь учимся, и смысл данного испытания я понял. У меня лишь был один вопрос.

А Вы пытаетесь очень неуместно и не особо удачно иронизировать, показывая прохождение вставкой картинки. :thinking:


#18

@akabeerka Ок! Ок! Не хотел никого обидеть, сарказма не было.
Мы друг друга неправильно поняли – бывает.

Действительно, мне нужно было всего лишь ответить на конкретный вопрос

В Вашем коде правила с разной специфичностью.

.main-menu li:hover {
background: #2ecc71
}

li.active {
background: #1abc9c;
border-bottom: 2px solid #2ecc71;
}

.main-menu li:hover сильнеее чем li.active.
Освежить в памяти можно здесь: https://htmlacademy.ru/courses/66/run/15

Либо уберите .main-menu из первого правила, либо добавьте .main-menu во второе.
И тогда порядок правил будет иметь значение.

Посмотрим предыдущее задание:

.main-menu a:hover {
    background: #f5f5f5;
}

.main-menu .active a {
    color: white;
    background: #0088cc;
}

Специфичность одинаковая – поэтому порядок важен.
Если ослабить второе правило убрав .main-menu – можно смело эти правила менять местами.


#19

В очередной раз благодарю! Как я мог об этом забыть… :angry:


#20