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

Курсы §13. Мастерская: создаём меню
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;

}