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

Курсы §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.

1 лайк
16

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

17

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

18

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

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

2 лайка
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

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

21

помогите народ что делать что бы было 100% где ошибка?

html,
body {
margin: 0;
padding: 0;
}

body {
width: 430px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu li {
display: inline-block;
border-left: 2px solid black;
background: #2980b9;
padding: 10px 15px;
margin-right: -4px;
}
.main-menu > li > a {

text-decoration: none;
color: #ffffff;

}

.main-menu>.active {
background: #1abc9c;
}
.main-menu {
margin: 0px;
padding: 0px;
}

22

Все ошибки хорошо видны на вкладке “Различия”, в том числе и то, что рамка слева не черная. Будьте внимательны, используемые цвета даны в теории.

23

там одна рамка и она черная по левому краю на 2 пикселя , о каких рамках вы говорите ? в различиях только последний блок надо растянуть показывает 96%

24

а вы проверьте, какие цвета указаны в теории к заданию - вы их все использовали?

25

извиняюсь только заметил что не блэк должно было быть , но проблема с последним нерастянутым пунктом осталась

26

2017-01-05_173120.png1296×612 58.6 KB

это то что получилось после всех изменений , как исправить ?

27

Судя по всему ширина 100px для последнего пункта не подходит.

28

Добрый вечер) Тоже хотел бы узнать, в чем ошибка или хоть поставить на путь истинный. 98% Пэддинг райт можно выставить на 39 пх, идет снос последнего пунтка вниз и показывает 99%, при 40 пх - уже и 90% не дает.

html,

body {
margin: 0;
padding: 0;
}

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

.main-menu {
padding:0;
margin:0;
margin-left:5px;
margin-top:0px;
}

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

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

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

.main-menu li:last-child a{
padding-right:35px;
}

29

Это кто подсказал? Попробуйте обойтись без этой строки.

30

А без этой строки весь блок съезжает влево, аналогично даже если ее убрать и поставить .main-menu li:first-child a{
margin-left:0px;
}

Безымянный.png1600×860 136 KB

31

Изменил у бади ширину на 440 и пэддинг-райт в 40 пикселей благополучно влез) Но, то не то)
Или как вариант немного ночной наркомании
.main-menu li:last-child a {
padding-right:35px;
box-shadow:5px 0 0 0 #2980b9;
}

1 лайк
32

Указал background для ссылок .main-menu a, 96% из 100%, а нужно было указать background для .main-menu, тогда получилось 100%.

Мой код CSS:

html,
body {
margin: 0;
padding: 0;
}

body {
width: 430px;
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;
background: #2980b9;

}

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

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

.active a {
background: #1abc9c;
}

33

Спасибо, автор.
У меня было 99%.
Мятный фон у третьей строки был чуток сдвинут, подсмотрела у вас margin: -5;, подкорректировала сама padding, поскольку он сдвинулся, и все, 100%

.main-menu {

background-color: #2980b9;

margin: 0;

padding: 0;

}

.main-menu li {

display: inline-block;

border-left: 2px solid #2c3e50;

margin-right: -5px;

}

.main-menu a {

display: block;

padding: 10px 15px;

color: #ffffff;

text-decoration: none;

}

.main-menu li:nth-child(3) {

background-color: #1abc9c;

}