Испытание: многоуровневое меню [15/28]

vsesouz · 12.Октябрь.2016 18:22:06

ура! 100%! спасибо! сорри за дубляж. очень нетерпелось пройти дальше).

Jevgenij_Junda · 12.Ноябрь.2016 21:42:28

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

.main-menu > li {
background-color: #2980b9;
border-bottom: 2px solid #2c3e50;
}

.main-menu > li > a {
display: block;
color: #ffffff;
padding: 10px 15px;
text-decoration: none;
}

.main-menu ul {
border-top: 2px solid #2c3e50;
background-color: #ffffff;
padding: 10px;
margin: 0;
}

.main-menu .active {
background-color: #1abc9c;
}

.main-menu li li {
display: block;
padding: 5px;
}

.main-menu li li a {
color: #2980b9;
}

Прошу оценки!

Tala · 13.Ноябрь.2016 08:20:44

элементы списка и так являются блочными по умолчанию. Зачем вы для них прописываете display: block; ?

Ineska · 13.Ноябрь.2016 08:45:45

+ padding: 5px; лучше для ссылок писать.

Jevgenij_Junda · 14.Ноябрь.2016 13:58:22

Спасибо, не подумал просто!

Jevgenij_Junda · 14.Ноябрь.2016 13:59:51

Каким тогда образом сделать промежутки между ссылками? паддинг не работает , маргин тоже

Ineska · 14.Ноябрь.2016 14:49:35

Перед тем как задавать отступы ссылкам, нужно поменять их тип на блочный. Тогда свойство padding будет работать.

Andrei_Ribac · 18.Ноябрь.2016 11:05:34

100% выполнение

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 {
width: 200px;
list-style: none;
margin: 0px;
padding: 0px;
}
.main-menu > li {
background:#2980b9;
border-bottom: 2px solid #2c3e50;

}
.main-menu a {
display: block;
color: #ffffff;
padding: 10px 15px;
text-decoration: none;

}
.main-menu > .active > a {
background:#1abc9c;
border-bottom: 2px solid #2c3e50;
}
.main-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
background: #ffffff;

}
.main-menu li li a {
display: block;
padding: 5px 15px;
background: #ffffff;
color: #2980b9;
text-decoration: underline;
}
.main-menu li li:last-child a {
padding-bottom: 15px;
}
.main-menu li li:first-child a {
padding-top: 15px;
}

Ineska · 18.Ноябрь.2016 12:30:36

Код будет короче, если отступы из двух последних правил задать для ul подменю.

Andrei_Ribac · 18.Ноябрь.2016 14:35:19

Огромное спасибо за подсказку, честно говоря не сразу такое заметишь и обратишь внимание когда пишешь код (видимо у меня еще очень мало опыта и понимания программирования в целом)

Исправил
.main-menu ul {
list-style: none;
margin: 0px;
padding: 10px 0px 10px 0px;
background: #ffffff;

Ineska · 18.Ноябрь.2016 17:06:10

padding: 10px 0; короче)

Helen_Om · 19.Ноябрь.2016 02:20:13

всем привет! я не знаю баг ли это, но проверка не работает
вот мой код:
html,
body,
ul
{
margin: 0;
padding: 0;
}

body {
box-sizing: border-box;
display: flex;
width: 280px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

ul {
flex-direction: column;
display: flex;
width: 200px;
}

ul li,
.active > ul li {
flex-direction: column;
display: flex;
}

.active {
background: #1abc9c;
}

.active > ul li {
border-bottom: none;
background: #fff;
}

li {
background: #2980b9;
border-bottom: 2px solid black;
}

.active > ul a {
margin: 17px 0 0 15px;
color: #005580;
text-decoration: underline;
list-style-type: none;
}

.active > ul li:nth-child(2) a {
margin: 10px 0 0 15px;
}

.active > ul li:nth-child(3) a {
margin: 10px 0 15px 15px;
}

a {
margin: 10px 0 10px 15px;
color: #fff;
text-decoration: none;
list-style-type: none;
}

по перфект пикселю - идеально. а до сих пор по программе холодно ((( кто разбирается - что я делаю не так?

Ineska · 19.Ноябрь.2016 06:15:37

Скорее всего дело в флексах, которые вы использовали. Причем писали их где только можно. Чем не угодила стандартная блочная модель?

Marina_Arseneva · 25.Ноябрь.2016 10:33:51

Здравствуйте, я тоже не могу пройти это задание, и просмотрев задания других выше в этой теме, у всех код разнится, а у меня визуально все так и очень похоже, но программа не пропускает. В чем моя ошибка?
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{
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}
.main-menu a {
display: block;
padding: 8px 14px;
text-decoration: none;
color: #2980b9;

}
.main-menu > .active > a{
color:#ffffff;
border-bottom: 2px solid #2c3e50;
background-color:#1abc9c;
}

.main-menu ul {
margin: 0;
padding: 5px 0;
list-style: none;
text-decoration: underline;
background-color:#ffffff;
color:#1abc9c;
}

.main-menu > li > a{
border-bottom: 2px solid #2c3e50;
background-color:#2980b9;
color:#ffffff;
}
.main-menu > li:nth-child(2){
border-top: 2px solid #2c3e50;

Ineska · 25.Ноябрь.2016 13:55:07

Отступы у ссылок подменю будут другие, и помните о кратности пяти. Это поможет вам подобрать правильные величины.

Marina_Arseneva · 25.Ноябрь.2016 15:22:05

Я пробовала 10 и 15пикселей, но всеравно не то.

Ineska · 25.Ноябрь.2016 16:40:56

Пробуйте еще, только помните, что в подменю у ссылок отступы меньше.

Zody · 06.Декабрь.2016 15:35:48

Проверьте, пожалуйста мой код. Задавала внешние отступы, а не внутренние …

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 {
width: 200px;
margin: 0;
padding: 0;
background: #ffffff;
}

.main-menu>li {
border-bottom: 2px solid #2c3e50;
}

.main-menu>.active>a {
background: #1abc9c;
border-bottom: 2px solid #2c3e50;
}

.main-menu a {
display: block;
text-decoration: none;
padding: 10px 15px;
background:#2980b9;
color: #ffffff;
}

.main-menu ul {
padding: 0;
margin: 10px 0;
list-style: none;

}

.main-menu li li a {
text-decoration: underline;
background: #ffffff;
color: #2980b9;
padding: 5px 15px;
}

Ineska · 06.Декабрь.2016 16:03:07

Хороший код, всё правильно.

Vladislav_Borodovoj · 08.Декабрь.2016 18:21:58

Мне кажется, код можно было сделать проще, хоть и всё верно >_<
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 {
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}
.main-menu .active .a {
border-bottom: 2px solid;
}
.main-menu a {
display: block;
text-decoration: none;
}
.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.main-menu > .active > a {
background-color: #1abc9c;
padding: 10px;
padding-left: 15px;
color: white;
border-bottom: 2px solid #2c3e50;
}
.main-menu ul a {
color: #2980b9;
text-decoration: underline;
}
.main-menu > li > a {
border-bottom: 2px solid #2c3e50;
color: white;
background-color: #2980b9;
padding: 10px;
padding-left: 15px;
}
.main-menu ul li {
background-color: white;
color: #2980b9;
text-decoration: underline;
padding-top: 10px;
padding-left: 15px;
}
.main-menu ul li:last-child {
border-bottom: 2px solid #2c3e50;
}
.main-menu ul li:last-child > a {
padding-bottom: 15px;
}
.main-menu ul li:first-child > a {
padding-top: 5px;
}