Здравствуйте. Задание выполнено на 100 процентов, но остались некоторые вопросы. Помогите, пожалуйста.
html,
body {
margin: 0;
padding: 0;
}
body {
width: 380px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu{
margin: 0;
padding: 0;
list-style: none;
}
.main-menu a {
display: block;
background-color: #2980b9;
border-bottom: 2px solid #2c3e50;
color: white;
text-decoration: none;
padding: 10px 15px;
}
.sub-menu li {
list-style: none;
width: 200px;
}
.main-menu>li {
position: relative;
width: 200px;
}
.main-menu .sub-menu {
position: absolute;
top: 0px
left: 140px;
z-index: 1;
}
.main-menu .opened a {
background-color: #1abc9c;
}
.main-menu .sub-menu a {
border-bottom: 2px solid #2ecc71;
}
- Во-первых, есть ли вопросы к коду. Может сократить можно?
2)z-index. В тренировочном задании в этом пункте мы прописывали 10, я пробовала 1, в итоге разницы не увидела. Также когда проходила 28/28 пробовала и 10, и 1. Отличия тоже не нашла. В итоге есть ли эти отличия (может их невооруженным глазом не заметно) или цифру можно минимальную (то есть 1) подставлять?
- Это вообще взрыв для мозга. Я так и не поняла движение sub-menu. Или, может, что-то не так усвоила в предыдущих курсах.
У абсолютного элемента внутри относительного точка координат относительный элемент. Вроде все так. Я выровняла sub-menu так, что слева все у нас хорошо, а справа оно располагается четко под строкой курсы. То есть мне надо его подвинуть на 40 px вверх. Выбираю значение top и чтобы меню двигалось вверх значение -40px. В ужасе наблюдаю как оно поехало фиг знает куда. И только перепробовав все варианты (возвращая меню на исходную точку) пришла к значению top: 0px. Почему это значение передвинуло меня вверх на 40 пикселей я так и не поняла.
И еще один вопрос. предположим, у нас есть точно такой же элемент (абсолют внутри относительного) Он занимает положение 1. Мы его двигаем в положение два, а затем в положение 3. Положение 3 высчитывается относительно положения 1 или положения 2?Мы, я думаю, это учили, но нигде найти не могу. А проверить опытным путем тоже не получилось.
Спасибо за помощь!
- z-index по умолчанию auto поэтому значения 1 хватает.
2.точка отсчета координат начинается от края родительского элемента, т.е верхний левый угол это top:0;
- Конечно относительно положения 1 к нему прибавите нужное кол-во пикселей.
И еще ваш код был неверен, и я его немного оптимизировал. У меня почему то он отобразился криво.
Надеюсь мои ответы помогут вам разобраться 
`html,
body {
margin: 0;
padding: 0;
}
body {
width: 380px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
ul{
list-style:none;
}
li{
width:200px;
}
.main-menu{
margin: 0;
padding: 0;
}
.main-menu a {
display: block;
background-color: #2980b9;
border-bottom: 2px solid #2c3e50;
color: white;
text-decoration: none;
padding: 10px 15px;
}
.main-menu .opened{
position:relative;
}
.opened .sub-menu {
position: absolute;
top: 0px;
left: 140px;
z-index: 1;
}
.main-menu .opened a {
background-color: #1abc9c;
}
.main-menu .sub-menu a {
border-bottom: 2px solid #2ecc71;
}`
и немного по коду исправленные ошибки
Алексей ,спасибо что откликнулись!
Только вот какая беда получается. Именно с этим CSS я получила 100 процентов. Его я не меняла (я даже лишний раз боюсь пыль с клавиатуры протереть, чтоб не испортить чего:grinning:)
Сегодня захожу в это же задание и что я вижу? Что sub-menu стоит криво. Я пытаюсь его поправить и вот что получается:
На скринах видно, что при изменении свойств позиция sub-menu не меняется. Он упрямо стоит на месте. Почему так происходит? Чего я не понимаю?
И еще. Я сравнила ваш CSS и свой. Там действительно есть отличия.
1)list-style: none. У меня он в main-menu и .sub-menu li. У вас в ul. По факту, это одно и тоже (если нет, исправьте меня, пожалуйста), просто у меня это две строчки кода, у вас одна.
2) Далее ширина 200px. У вас она в li. У меня в .sub-menu li и main-menu li, то есть по факту ситуация идентичная 1 пункту.
3) И вот единственное различие
.main-menu .opened{
position:relative;
} Я подумала что в этом собака зарыта. Но нет, добавила к себе в код и ничего не получилось.
В итоге, я пришла к выводу, что коды у нас фактически идентичны, но у вас он работает, а у меня нееееет:confused: Я уже с ума тут схожу. Что я упускаю?
по 1 и 2 пункту, это просто оптимизация для сокращения кода, чтоб потом не искать в разных селекторах одно и тоже,и тут у вас будет возможность например переопределить свойство для нужного селектора, это я сейчас рассуждаю не по данному заданию а в общем понятии этого приема, в будущем пригодиться.
а по пункту 3 незнаю почему у вас не сработал данный код, он прошел проверку 100%, может дело в браузерах, сейчас проверю.
В Mozila все отлично работает. Скопируйте весь мой код, если вставляли фрагментами до этого.
А вообще смысл задания то в этом был http://codepen.io/AleksFers/pen/aZBbVp
Если я вставляю весь ваш код, то все работает, вставляю свой код (по сути тот же самый) не работает. Вот этого я не могу понять. Где принципиальное различие в кодах.
И что больше всего удивляет, что мой же код работал несколько дней назад, а теперь нет.
По поводу оптимизации я поняла, да. Это очень важно, а то еще не до конца понимается что где можно сократить. Спасибо.
И еще один вопрос. Так чтоб окончательно запутать себе голову)))
Мы задаем position: absolute и position:relative; только лишь для удобства? чтоб нам было удобней выравнивать элемент с позицией absolute относительно элемента relative? И вот еще в вашем коде вы задали позицию relative классу opened/ Соответственно, саб меню будет двигаться относительно строчки Курсы. А если задать relative классу main-menu это будет считаться ошибкой? как я понимаю тогда бы элемент двигался относительно просто левой верхней точки меню?Есть разница? Или все же правильней задавать позицию ближайшему родителю, то есть opened.
Нет, мы его задаем для того чтобы определить относительно какого элемента он будет спозиционирован по логике кода, т.е если элемент являеться под меню курсов то и позиционировать его надо относительно его, чтоб путаницы потом не было. Если бы задали main-menu это не было бы ошибкой но было бы немного не логично, ведь элемент выпадает из определенного пункта.
1 лайк
Все, теперь разобралась. Спасибо огромное.
Да не за что, webref.ru вам очень поможет в некоторых вопросах.
1 лайк
