20/28 - 100%. Кто молодец? я молодец! :)


#1

.main-menu {
background-color: #2980b9;
padding: 0;
margin: 0;
}

.main-menu li {
display: inline-block;
margin-right: -5px;
}

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

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


#2

Никто себя так не похвалит, как сам себя…)


#3

я бы вместо кучи падингов по разным сторонам написал один padding 10px 15px


#4

Согласен. Это очевидно, но для тренировки и большей наглядности для себя я раскидал все это по пунктам.


#5

А зачем ещё один бэкграунд, если ты его в .main-menu прописал.


#6

Такой же код, но почему-то 93% :neutral_face::neutral_face::neutral_face:

UPD. Нашел ошибку и поменял margin-left на margin-right. Результат 96% :neutral_face::neutral_face::neutral_face:

.main-menu {
padding: 0;
margin: 0;
}

.main-menu li {
display: inline-block;
margin-left: -5px;
}

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

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


#7

.main-menu {
padding: 0;
margin: 0;
background: #2980b9;
}
Или удлинить последний пункт меню.


#8

Не понимаю зачем задавать бэкграунд всему меню, если у нас есть фон для каждого отдельного пункта? Кстати, попытался костылями увеличить длину последнего пункта и он переносится на другую строчку.
Ваша подсказка с фоном помогла, но въехать в суть “проблемы” пока не могу.


#9

Покажите, как увеличивали ширину последнего пункта.


#10

Дело в том, что ul как блочный элемент тянется на всю ширину body - 430px.
Если вы зададите рамку для .main-menu, то увидите, что его ширина чуть больше, чем суммарная ширина всех пунктов меню.


#11

Я понял. Так как мы задаем бэкграунд для элементов он оставляет справа белый кусок, потому что длина шире, чем сами элементы. Спасибо.

Ширину увеличивал через a:last-child из-за чего он переносился на следующую строку.


#12

окей. если задать background для “ul” и сделать активным пункт меню “Достижения”? будет выделяться не вся кнопка. как с этим бороться?


#13

Ваш код, пожалуйста.


#14

Я где-то не могу найти ошибку и поменять ширину последнего пункта.
}
.main-menu {
padding:0px;
padding:0px;
/* background:#2980b9;*/
}
.main-menu li{
display:inline-block;
margin-right:-5px;
}
.main-menu a{
background:#2980b9;
border-left: 2px solid #2c3e50;
padding:10px 15px;
margin-left:-5px;
display:block;
color:#ffffff;
text-decoration:none;

.main-menu li a:last-child{
width:100px;
}
.main-menu .active a{
background:#1abc9c;
}


#15

Попробуйте изменять ширину последнего пункта не с помощью width, а с помощью padding-right.


#16

я только что нашел банально не закрытую фигурную скобку лицорука. ширина стала меняться, и при помощь width и при помощь паддинг.
а в чем принципиальная разница между паддинг и width в данной ситуации? в любом случае подгонять вручную. а если какие изменения? например “демонстрация” нужно будет изменить на “Демо” опять подгонять, это норма?


#17

Лучше padding. А ширину не прописывать. Тогда общая ширина будет рассчитываться как сумма ширины содержимого (ширины слова) и отступов справа и слева.


#18

правило с селектором a:last-child будет применено к последнему элементу внутри родителя. Т.е. будет выбираться последняя ссылка внутри элемента < li > , а в нашем случае < a > вообще единственный элемент в каждом родительском < li > Поэтому данное правило будет действовать на все ссылки (во всех < li >)

Если же необходимо выбрать только последнюю ссылку (“достижения”), то селектор нужно прописать .main-menu li:last-child a - такой селектор выберет ссылку, находящуюся в элементе, который является последним элементом списка.


#19

подскажите что, нет? никак не получается растянуть последний блок… 96% (

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

}

.main-menu li { display:inline-block;
margin-right: -5px; }

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

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


#20

В этой теме есть ответ на ваш вопрос. Будьте внимательны.