Создаём меню 9/28


#23

Подскажите, пожалуйста, почему код выдает 100% только при наличии margin-top: 14px в .main-menu, тогда как отступы должны быть кратны 5?

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

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

.main-menu {
    width: 200px;
    margin: 0;
    margin-top: 14px;
    padding: 0;
    list-style: none;
}

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

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

#24

Не обнуляйте margin у списка меню.


#25

Убрал обнуление margin, ситуация та же: 100% только при margin-top: 14px;


#26

Вообще не пишите margin для списка меню.


#27

Выдает 92%, подскажите, в чем может быть ошибка.

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: вертикальное меню</title>
    </head>
    <body>
        <ul class="main-nav">
          <li><a href="">Курсы</a></li>
          <li class="active"><a href="">Демонстрации</a></li>
          <li><a href="">Участники</a></li>
          <li><a href="">Достижения</a></li>
          <li><a href="">Профиль</a></li>
        </ul>
    </body>
</html>

CSS

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

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

.main-nav {
    padding: 0;
    margin: 10px 0 0 0;
    list-style: none;
}

.main-nav li {
    
}

.main-nav a {
    display: block;
    width: 170px;
    height: 20px;
    color: #ffffff;
    border-bottom: 2px solid #2c3e50;
    text-decoration: none;
    background: #2980b9;
    padding: 10px 15px;
    
}

.main-nav .active a{
    border-bottom: 2px solid #2ecc71;
    background: #1abc9c;
}

#28

100% код

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

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

.main-menu {
width: 200px;
padding: 0;
list-style: none;
margin-top: 14px;
}

.main-menu li {
display: block;
background-color: #2980b9;
color: #ffffff;
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
}

.main-menu .active {
background-color: #1abc9c;
border-color: #2ecc71;
}


#29

Вот мой вариант на 100%, но у меня margin-top у main-menu получился 14px.

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

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

.main-menu{
list-style:none;
width: 200px;
margin:0;
padding:0;
margin-top: 14px;




}

.main-menu a {
padding:0;
margin:0;
padding: 10px 15px ;
display:block;
text-decoration:none;
color:white;
background-color:#2980b9;
border-bottom: 2px solid #2c3e50;
    }
    
.main-menu .active a {
background-color:#1abc9c;
border-bottom: 2px solid #2ecc71;
    }

#30

Тоже на 100%, только я использовал абсолютную позицию :smile:
html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.menu{
width:200px;
list-style:none;
position:absolute;
left:-30px;
}
.menu a{
display:block;
border-bottom:2px solid #2c3e50;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
text-decoration:none;
color:#ffffff;
background:#2980b9;
margin-left:0px;
}
.menu .active a{
background:#1abc9c;
border-bottom:2px solid #2ecc71;
}


#31

Показывает 94%…но я никак не пойму как сделать нижнюю рамку под “Демонстрация” салатовой… все пробовала… она никак не скрывает черную…

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

.main-menu {
list-style: none;
width: 200px;
margin-left: -40px;

}

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

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

}

.main-menu .active a:hover {
background: #2ecc71;
}


#32

Это неправильно. Пересмотрите теорию в заданиях с 1 по 8.
Рамка у пункта меню должна быть только снизу, border-bottom.
Тогда будет просто переопределить ее цвет у активного пункта в правиле для
.main-menu .active a


#33

Спасибо вам большое! Что-то я намудрила…она у меня просто уехала вправо…вся композиция)
теперь все получилось!


#34

Как исправил font-size с 15 на 14 дало 100%,но мне кажется что это не правильно,помогите пожалуйста.

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

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: вертикальное меню</title>
    </head>
    <body>
        <ul class='main-menu'>
            <li><a href='#'>Курсы<a></li>
            <li class='demonstration'><a href='#'>Демонстрации<a></li>
            <li><a href='#'>Участники<a></li>
            <li><a href='#'>Достижения<a></li>
            <li><a href='#'>Профиль<a></li>
        </ul>
    </body>
</html>

CSS

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

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

ul {
    display: block;
    width: 200px;
}
.main-menu {
    margin: 0;
    padding: 0;
    display: block;
    list-style: none;
    color: white;
    background: #2980b9;
    margin-top: 14px;
    
}
.main-menu li {
    padding: 10px 15px;
    border-bottom: 2px solid #2c3e50;
}
.main-menu .demonstration {
    border-bottom: 2px solid #2ecc71;
    background: #1abc9c;
}
.main-menu a {
    text-decoration: none;
    color: #ffffff;
}

#35

Изначально и было 14px.


#36
Мой код - 100%

Здравствуйте. А можно ли в этом задании обойтись без position? В заданиях до этого испытания (создаём меню) небыло речи о position. Но и пункты меню, что главное, не смещались вправо. Главный мой вопрос - почему у меня смещается меню вправо?)

Предыдущее задание, меню не сползает, но и position нету

Смещение:

Мой код без position, код почти идентичный что в предыдущем задании


#37

position: relative в этом задании не нужен.

Потому что .main-menu: padding: 0;


#38

Да, точно.
.main-menu {
padding: 0;
}
Применяю сейчас в следующем испытании, работает)
Спасибо)