В чем моя ошибка ?
Весь код не вижу. Могу предположить, что не обнулили отступы у списка меню.
Будьте внимательны, все используемые цвета даны в теории к заданию.
И помните, что названия классов, написанные транслитом, считаются дурным тоном.
Это и есть весь код . Выше идет Body . А обязательно задавать ссылки ? Я просто так меню сделал без ссылок .
В данном случае обязательно.
Значит сам список ul или “kontainer”, как вы его обозвали, не стилизовали совсем.
Найдите пожалуйста у меня ошибку . Никак не могу найти . Спасибо
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;
}
.menu {
margin: 0;
padding: 0;
padding: 10px
font-style: none;
background-color: #2980b9;
width: 200px;
}
.menu li {
border-bottom: 2px solid;
}
.menu a {
display: block;
padding: 10px 15px;
color: #ffffff;
text-decoration: none;
margin-bottom: -2px;
}
.menu .active a {
background: #1abc9c;
border-bottom: 2px solid #2ecc71;
}
Не обнуляйте margin здесь.
Это для чего?
Если я в menu удалю нулевые маргины и падинги, то получится это.
Если я поставлю какие то другие цифры, то оно опять же сдвинется в другое место, а мне надо чтобы меня было именно в этом углу. да и вообще каша получается Что делать ?
А без margin-bottom: -2px; у меня где демонстрации рамка снизу не полностью зеленая а зелено черная почему то. В теории же было сказано ставить маргин отрицательный чтобы не была 2 рамка.
Заметьте, про padding я ничего не говорила.
А вот ваша черная рамка. Вы всем пунктам меню рамку задали как для li, а для активного пункта уже как для ссылки, поэтому получилась двойная.
Наверное, в данном случае вы имели в виду свойство list-style.
Спс. помогло . Задал всем li кроме демонстрации отдельный класс, где поставил им черную рамку. потом удалил margin-bottom: -2px и все пошло .
Не обязательно… Вот пример оригинальности без ссылок )))
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;
}
.menu {
padding: 0px;
list-style: none;
background-color: #2980b9;
width: 200px;
}
li {
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
color: #ffffff;
}
.active:hover {
background-color: #1abc9c;
border-bottom: 2px solid #2ecc71;
}
li.active:active {
background-color: #2ecc71;
border-bottom: 2px solid #2ecc71;
}
li:nth-child(2) {
background-color: #1abc9c;
border-bottom: 2px solid #2ecc71;
}
Меню без ссылок - это не меню…
Ещё, какое меню…только без ссылок, потому что они здесь не нужны… 100% выполнения доказывает, что выполнено верно!!!
ну да, если в ресторане, то можно и без ссылок… а вот в случае сайта - увы - никак. 100% выполнения доказывает, что ваша картинка совпала с картинкой задания. Но вам же и правильность кода важна, а не только визуальное совпадение?
Не стоит так заморачиваться… ))) Понятно, что для сайта будут нужны ссылки, но не надо изобретать велосипед ))) Главное для себя понимать, что придется делать подобные манипуляции не с пунктами, а с ссылками ))) Я, лишь, опроверг чужое мнение и доказал на деле кодом, что можно без ссылок, дабы не вводить людей в заблуждение !!! )))
с такой логикой можно было и без списка обойтись: берем дивы с заданными размерами и без маргинов, чтобы друг к другу по вертикале прилипали
Увы и ах… Без списка задание не пройдёт ))) Поэтому не нужно предлагать такую халтуру )))))
Не пройдет? да ладно 
правда, есть маленькая проблема: у списка есть отступы по умолчанию, а здесь пришлось добавлять верхний маргин - и он 14рх получается, не кратно 5 - но 100%.
как вы говорили:
1 лайк
более того, 100%-соответствия можно добиться вообще исключительно с помощью СSS (с помощью рамки выделен добавленный кусок кода) - вот только такое решение будет ну совсем далеко от меню:
так что, стопроцентность - это никак не гарантия верного кода
Вас, куда несет??? Остановиииииитесь )))))))))))
Задание нужно делать в рамках изучаемого материала )))