“Подсказка: все размеры и отступы кратны 5” - то, что написано в задании. Но в реальности, чтобы получить 100% и сдвинуть меню как в образце, нужно задать классу меню внешний отступ:
margin: 14px 0;
Или можно как-то иначе 100% получить?)
Не пишите margin и всё будет кратно 5.
2 лайка
Так если не написать 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;
}Верхнюю строчку тоже комментируйте. Это ведь тоже margin.
Зачем её комментировать? Я спросила как сделать отступ без этих 14px?
В задании написано что всё кратно 5, но 15px не подходит.
У некоторых “текстовых” тегов есть отступы по умолчанию. Они не прописаны явно.
То есть, в данном случае вы не пишете свойство margin для списка меню, но отступ всё равно есть.
Так можно выполнить задание на 100% и как-то обойтись без margin-top: 14px; ?
В своем правиле для .main-menu вы не пишете свойство margin. Таким образом, в коде у вас всё кратно 5. Но отступ подразумевается и всё равно есть.
Блин, наступил на те же грабли.
Предыдущие упражнения успели приучить не подвешивать список по умолчанию – все отступы обнуляем, всё переназначаем… И здесь бац…
Ещё один урок – доверяй, но проверяй!
list-style: none; можно переместить в класс .main-menu.
аккуратнее получится.
<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 
Но, Ваш, комментарий выручил. Благодарю.
Но у меня еще один вопрос, я расположил .main-menu li:hover выше чем li.active и все же, при наведении на активное состоянии (Демонстрации), пункт все равно подсвечивается. А как я понял из предыдущего урока, этого быть не должно.
В третьей цели правило .main-menu a:hover нужно расположить перед .main-menu .active a .
Это не меню… Где Ваши ссылки?
Это не меню… Где Ваши ссылки?
В силу лени, единственное, я ссылки не добавил, во всем остальном смысл абсолютно такой же.
Так что, не считаю это грубой ошибкой. Я хочу сказать, что от добавления мною ссылок, смысл кода не поменяется. Имитация режима меню присутствует. Если добавить ссылки, они все равно не рабочие (якоря).
делайте, выкладывайте, обсудим (для меня было не всё так просто).
1 лайк
делайте, выкладывайте, обсудим (для меня было не всё так просто).
Так я же выше уже выложил
Этим кодом, собственно, и прошел на 100%.
https://jsfiddle.net/akabeerka/8nxgvdm8/4/ - Можно тут протестировать, что я накодил
А, я прошёл на 100% этим кодом: http://codr.io/7oiuxcp
Ну, да! Ничего не выбирается – всё равно там были бы пустые якоря.
Ничего не подсвечивается, не меняется форма курсора, не нужно никаких :hover :active :link.
Нафига, если и так 100%?
А, я прошёл на 100% этим кодом: http://codr.io/7oiuxcp
Во-первых, я не просил оценивать мой код. Во-вторых, Вы не мой работодатель или заказчик, чтобы придираться к этому. В третьих, у меня там все отлично подсвечивается, а про изменение курсора (как раз таки те самые ссылки) в задании ничего сказано не было.
вот Вам hover, вот Вам active:
Мы здесь учимся, и смысл данного испытания я понял. У меня лишь был один вопрос.
А Вы пытаетесь очень неуместно и не особо удачно иронизировать, показывая прохождение вставкой картинки. 
@akabeerka Ок! Ок! Не хотел никого обидеть, сарказма не было.
Мы друг друга неправильно поняли – бывает.
Действительно, мне нужно было всего лишь ответить на конкретный вопрос
В Вашем коде правила с разной специфичностью.
.main-menu li:hover {
background: #2ecc71
}
li.active {
background: #1abc9c;
border-bottom: 2px solid #2ecc71;
}
.main-menu li:hover сильнеее чем li.active.
Освежить в памяти можно здесь: Расчёт значения специфичности — Наследование и каскадирование — HTML Academy
Либо уберите .main-menu из первого правила, либо добавьте .main-menu во второе.
И тогда порядок правил будет иметь значение.
Посмотрим предыдущее задание:
.main-menu a:hover {
background: #f5f5f5;
}
.main-menu .active a {
color: white;
background: #0088cc;
}
Специфичность одинаковая – поэтому порядок важен.
Если ослабить второе правило убрав .main-menu – можно смело эти правила менять местами.
2 лайка
В очередной раз благодарю! Как я мог об этом забыть… 