Прошел на 100%., но походу адовый код, есть чувство что можно как-то упростить. Кто что скажет?

Vyacheslav_Muhin · 20.Декабрь.2015 17:06:46

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;
    white-space:nowrap;
    margin-left:-4px
}
.main-menu{
    padding:0;
    margin:0 0 0 4px;
    width:426px;
    background:#2980B9;
}
.main-menu a{
    display:block;
    padding:10px 15px;
    background:#2980B9;
    color:#fff;
    text-decoration:none;
    border-left:2px solid #2C3E50;
}
.main-menu .active a{
    background:#1ABC9C;  
}
li:nth-child(1) a{
    margin-right:-1px;
}
li:nth-child(2) a{
    margin-right:-1px;
}
li:nth-child(3) a{
    margin-right:-1px;
}

Vyacheslav_Muhin · 20.Декабрь.2015 17:09:09

если что это Мастерская: создаём меню / Испытание: горизонтальное меню [20/28]

tokkusu · 21.Декабрь.2015 22:47:47

Вот мой код:

.main-menu {
list-style: none; /* может и не нужен, когда проходил задание, писал на автомате */
margin: 0;
padding: 0;
background-color: #2980B9;

/* Указывать ширину для этого блока нет необходимости */

}
.main-menu li {
display: inline-block;
margin-right: -5px; /* Этот марджин применяется к элементам списка, поэтому селекторы вида: li:nth-child(n) a {} с марджинами — не нужны */

}
.main-menu a {
border-left: 2px solid #2C3E50;
display: block;
background-color: #2980B9;
padding: 10px 15px;
color: #fff;
text-decoration: none;
}
.main-menu .active a {
background-color: #1ABC9C;
}

На абсолютную истину не претендую.

armornik · 01.Апрель.2017 13:21:22

У меня такой код получился на 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{
margin: 0 ;
padding: 0 0 0 5px;
width:427px;
}

.main-menu li{
display: inline-block;
margin-left: -4px;
white-space:nowrap;
}

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

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

.main-menu li:nth-child(4){
width:135px}

Ineska · 01.Апрель.2017 13:24:06

Величина не кратна пяти. Отрицательный отступ в 5px разделили на два, зачем - не понятно.

armornik · 01.Апрель.2017 13:59:55

Если этого не сделать, то последний элемент у меня “выпадает” на следующую строку- не вмещается. Поэтому немного увеличил. Можно сделать и больше, кратно 5, но главное - не меньше

Tala · 01.Апрель.2017 14:49:16

а зачем вам вообще задавать ширину? ul - блочный элемент и по умолчанию растянется на всю ширину родителя.

armornik · 02.Апрель.2017 10:54:53

Потому что, если не задавать, то не получится 100%

Tala · 02.Апрель.2017 13:59:01

а как же у меня без ширины 100% получилось? наверное, магия и личное обаяние.

ну а если серьезно, то вот вы сами пишите:[quote=“armornik, post:6, topic:2873”]
Если этого не сделать, то последний элемент у меня “выпадает” на следующую строку- не вмещается. Поэтому немного увеличил. Можно сделать и больше, кратно 5, но главное - не меньше
[/quote]

ближайшее “больше чем 427, но при этом кратное 5” - это 430рх. А это в свою очередь - ширина, прописанная для боди. Т.е. та ширина, на которую ul и так растянется по умолчанию, если width не прописывать.

NuclearWinter · 11.Май.2017 20:26:16

Мой код таков. Единственная трудность с которой столкнулся - нехватка ширины в последнем блоке. В итоге методом тыка дошёл до 136 px и тогда вышло 100%. Где я ошибся?

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

}

.main-menu li{
display: inline-block;
background-color: #2980B9;
margin-right: -5px;
}

.main-menu li:last-child{
width: 136px;
}

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

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

Tala · 12.Май.2017 07:48:36

а если точнее - нехватка окрашенной области в конце меню.
если вы зададите синий цвет не пунктам меню (li), а для всего списка ul, то вам не придется подбирать ширину последнего пункта

lyaskovetc · 01.Ноябрь.2017 10:17:45

Мой 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{
padding: 0;
background: #2980b9;
margin: 0;
}

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

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

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

Researcher · 02.Ноябрь.2017 21:56:48

Вроде самый минимальный код, 100% решение

/* Общий блок меню /
.main-menu {
width: 200px;
margin: 0;
padding: 0;
list-style: none;
}
/ Все ссылки меню /
.main-menu a {
padding: 10px 15px;
display: block;
color: white;
text-decoration: none;
background: #2980b9;
border-bottom: 2px solid #2c3e50;
}
/ Верхняя ссылка /
.main-menu .active > a {
background: #1abc9c;
}
/ Блок подменю /
.active ul {
list-style: none;
padding: 10px 0;
border-bottom: 2px solid #2c3e50;
background: white;
}
/ Ссылки блока подменю */
.active ul a {
padding: 5px 15px;
color: #2980b9;
background: white;
text-decoration: underline;
border: 0;
}

mayil · 28.Январь.2018 10:38:35

97 % и без ‘костылей’

Код

body,html{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}body ul{margin:0;padding:0}body ul li{display:inline-block;background-color:#2980b9;padding:10px;border-left:2px solid #2c3e50;margin-left:-5px}body ul li a{text-decoration:none;color:#fff}body ul li:hover{background-color:#1abc9c}

просто не люблю попадать в пиксели

Ineska · 28.Январь.2018 14:19:41

Следите за форматированием кода. В этой “каше” не разобраться.

mayil · 29.Январь.2018 16:30:39

Это препроцессор так скомпилировал )

Stalker · 25.Июль.2018 09:42:31

Не знаю насколько правильно,но зато коротко получилось)

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

li {
list-style: none;
display: inline-block;
border-left: 2px solid #2c3e50;
padding: 10px 15px;
margin-right: -5px;
background-color: #2980b9;
}

a {
color: white;
text-decoration: none;
}
.active {
background-color: #1abc9c;
}

li:last-child {
width: 89px;
}

Valery_S · 25.Июль.2018 10:38:57

display: block ???

Omenin48 · 08.Ноябрь.2018 15:41:45

20 минут решал проблему с последним блоком списка и только так получилось

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

body {
width: 600px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}

.main-menu {
width: 400px;
margin: 0;
padding: 0;
list-style: none;
background: #2980b9;
}

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

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

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

Omenin48 · 08.Ноябрь.2018 15:44:21

Кто то знает как решить его без 20 и 24 строки?