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


#1

Всем здоровья! Все испытания я сделал. До этого. Испытание 15/28 у меня вынесло мозг. Я сначала думал, что справлюсь быстро. Но ничего не получается. Полоска “теплее” не доехала 1см до финиша. Не получились общий размер по вертикали и background-bottom в блоке “Курсы”. Кто-то может выложить правильное решение и его мотивацию? Ответов на свои вопросы на форуме на нашел. И еще: какая разница в задании свойства display: block; элементу li и ссылке a? Создатели курсов могут ответить?


#2

А выложите, пожалуйста свой код. Хочу попробовать помочь и вместе с тем разобраться в своих ошибках. У меня решение приняло 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;
padding: 0;
margin: 0;
list-style: none;}

.main-menu > li { /рамку и цвет ячейкам таблицы, кроме списка второго уровня/
background:white;
border-bottom: 2px solid #2c3e50;}

.main-menu a { /Задаем значение блок, фон, внутренние отступы/
display: block;
padding: 10px 15px;
text-decoration: none;
color: white;
background:#2980b9;}

.main-menu a:hover { /при наведении изменяется цвет ячейки/
background: #f5f5f5;}

.main-menu > .active > a { /указываем свойства для всего, что между меню и переменной а, в
_ данном случае - это и есть ячейка “Курсы”
/

color: white;
background: #1abc9c;
border-bottom: 2px solid #2c3e50;}

.main-menu ul { /здесь общие свойства для списка второго уровня/
margin: 5px 0;
padding: 5px 0;
padding-left: 15px;
list-style: none;}

.main-menu li li a { /а здесь конкретно для каждой ячейки из списка второго уровня/
padding: 5px 0;
color: #2980b9;
background: white;
text-decoration: underline;}

И еще, в вопросе Вы написали “Не получились общий размер по вертикали и background-bottom в блоке “Курсы”” или у Вас опечатка, или Вы неверно написали команду - border-bottom, а не background-bottom. Хотя, может я чего-то просто еще не знаю.


#3

Спасибо за подсказку ( .main-menu > li - background:white; ) без этого был ступор на несколько часов…если интересно мой код…
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: 0px;
padding: 0px;
list-style; none;
}
.main-menu > li {
background:white;
}

.main-menu a{
display: block;
padding: 10px 15px;
margin: 0px;
text-decoration: none;
color:#ffffff;
background: #2980b9;
border-bottom: 2px solid #2c3e50;

}    

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

.main-menu ul {
padding: 10px 0;
list-style: none;
border-bottom: 2px solid #2c3e50;
}

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


#4

В принципе, все похоже, единственное, Вы везде писали Border, где нижний, где верхний. Можно все заменить одним, указав его нижним в main-menu > li


#5

Проверил, получилось такое:


#6

Это потому что Вы ставили отступы, согласно рамке, а она была у Вас в разных местах. А теперь Вам нужно перепроверить отступы.


#7

У меня, тот код, что Вы написали , не дает тоже сто процентов. Несовпадения букв. Сейчас посмотрю, что нужно подправить.


#8

отступы все проверил - не то…


#9

Забавно, ваш код дает такое -


#10

А Вы два border оставили? один в .main-menu > .active > a , а второй main-menu > li . Оба border-bottom: 2px solid #2c3e50


#11

у меня тоже самое, Ваш выдает несовпадение букв, а мой норм) наверное что-то в установленных шрифтах. Ваш код


#12

выключил все (картинка1) сейчас включил .main-menu > .active > a – получился разрыв между участники\достижения))) насчет шрифтов - похоже что так, у меня win7, браузер Vivaldi


#13

У меня chrom и windows pro 10. Не знаю, что и сказать. Значит, оставляйте как есть) Просто сейчас многое нужно будет корректировать, это так, для сведения, что логичнее было бы подчеркивание указать в двух элементах, а не в каждом, как у Вас, а в некоторых и по два, но думаю, не в этом все равно была суть задания)


#14

Ну да…жаль что тут не дают изначально правильного кода с которым можна сверяться, так как вариантов получить 100% много…но какие из них правильные?


#15

При проверке кода, скопированного на форуме, обращайте внимание на кавычки.
При необходимости исправляйте у себя…

font-family: “Arial”, sans-serif;   /* “неправильные” кавычки */
font-family: "Arial", sans-serif;   /* "правильные" кавычки */

#16

Это, конечно, я ошибся: правильно border-bottom


#18

@leon5954 Вставьте Ваш код CSS – разберёмся вместе.


#19

точно, проблема была в кавычках…спасибо))


#20

Всем здоровья! Приходиться повторять всю теорию. Задержался с кодом.

image
image
ul {/* обнуляем стили списков*/
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}
a {/* делаем ссылки блочными, задаем отступы и фон, цвет /
display: block;
text-decoration: none;
padding: 10px 15px;
color: white;
background: #2980b9;
}
.active a {/
задаем фон активной ссылке*/
background: #1abc9c;
}
.main-menu ul a {/* задаем фон, цвет, подчеркивание ссылкам подменю*/
background: #ffffff;
text-decoration: underline;
color: #2980b9;
line-height: 1;

}
.main-menu > li {
border-bottom: 2px solid #2c3e50;
}
.main-menu ul {
border-top: 2px solid #2c3e50;
}
Во-первых, не понимаю почему некоторые используют :hover в этом испытании. Здесь, мне кажется, не нужно никакой динамики. Просто надо добиться 100% соответствия образцу. Во-вторых, думаю, что вся проблема в подменю: то ли в высоте строки line-height , которую я тоже попробовал , то ли еще в чем то, что меняет высоту подменю (белого фона).

А зачем задавать li первого списка белый фон?


#21

фон задала, потому что без него вот такая картина выходит

А ховер использовали потому, что в теории это проходили и в 99% заданий на практике, он будет применяться, поэтому лучше учиться сразу делать правильно. В данном задании можно и без него, но для дальнейшей практики лучше с ним.