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

AnonymousRaccoon · 19.Август.2017 10:23:05

Подскажите, пожалуйста, почему код выдает 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;
}

Ineska · 19.Август.2017 15:02:06

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

AnonymousRaccoon · 22.Август.2017 08:26:18

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

Ineska · 23.Август.2017 06:12:15

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

sw0rl0k · 01.Сентябрь.2017 11:21:35

Выдает 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;
}

kdrnastya · 21.Ноябрь.2017 13:47:18

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;
}

gektorix · 23.Декабрь.2017 07:23:32

Вот мой вариант на 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;
    }

VoL · 29.Декабрь.2017 04:36:43

Тоже на 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;
}
.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;
}

Stepoull · 01.Февраль.2018 23:57:44

Показывает 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;
}

Ineska · 02.Февраль.2018 09:48:45

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

Stepoull · 02.Февраль.2018 21:42:38

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

Zozoko · 09.Февраль.2018 23:19:00

Как исправил 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;
}

Ineska · 15.Февраль.2018 16:03:40

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

AnotherWay · 16.Март.2018 10:11:31

Мой код - 100%

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

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

Смещение:

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

Valery_S · 16.Март.2018 12:14:23

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

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

AnotherWay · 16.Март.2018 12:35:09

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

Andrieieshyn · 21.Декабрь.2020 10:32:51

Сделал следующим образом на 100%:
html,
body {
margin: 0;
padding: 0;
}

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

background-color: #ecf0f1;
}
.main-menu{
padding:0;
}
li{
list-style-type:none;
padding:10px 15px;
border-bottom:2px solid #2c3e50;
}
ul
.one,
.tree,
.four,
.five{
color:#ffffff;
background-color:#2980b9;
}
ul .two{
background-color:#1abc9c;
color:#ffffff;
border-bottom:2px solid #2ecc71;
}

lr7779 · 24.Декабрь.2020 08:38:57

Всё очень просто.
Первому пункту меню задаём отрицательный маргин…
.main-menu {
list-style: none;
margin: 15px 0;
padding: 0;
width: 200px;
}
.main-menu li:first-child {
margin-top: -1px;
}
.main-menu li {
background-color: #2980b9;
margin: 0;
padding: 0;
border-bottom: 2px solid #2c3e50;
}
.main-menu a {
text-decoration: none;
color: #fff;
display: block;
padding: 10px 15px;
}
.main-menu li.active {
background-color: #1abc9c;
border-bottom: 2px solid #2ecc71;
}