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

Курсы §13. Мастерская: создаём меню
1

Вроде всё сделал правильно.Выдаёт 93%. Подскажите где ошибка.

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;
    padding: 0;
    list-style: none;
 }
.main-menu a {
    display: block;
    padding: 10px 15px;
    border: 1px solid #2C3E50;
    text-decoration: none;
    color: #FFFFFF;
    background: #2980B9;
}
.main-menu .active a {
    color: #FFFFFF;
    background: #1ABC9C;
}
.main-menu .active a:hover {
    background: #2ECC71;
}

<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: вертикальное меню</title>
    </head>
    <body>
       <ul class="main-menu">
        <li><a href="#01">Курсы</a></li>
        <li class="active">
            <a href="#02">Демонстрации</a></li>
        <li><a href="#03">Участники</a></li>
        <li><a href="#04">Достижения</a></li>
        <li><a href="#05">Профиль</a></li>
      </ul>
    </body>
</html>
2

А HTML скинете?

4
Испытание: вертикальное меню 
</head>
<body>
   <ul class="main-menu">
    <li><a href="#01">Курсы</a></li>
    <li class="active">
        <a href="#02">Демонстрации</a></li>
    <li><a href="#03">Участники</a></li>
    <li><a href="#04">Достижения</a></li>
    <li><a href="#05">Профиль</a></li>
  </ul>
</body>
5

Дело в рамках вокруг пунктов меню. Смотрите во вкладке «Различия». Там нужны только верхние и нижние рамки.

6

Спасибо

1 лайк
7

результат 94%

<body><ul class="menu">
    <li><a>Курсы</a></li>
    <li class="active"><a>Демонстрации</a></li>
    <li><a>Участники</a></li>
    <li><a>Достижения</a></li>
    <li><a>Профиль</a></li>
    </ul>
</body>

.menu{
position:relative;
right:40px;
text-decoration:none;
list-style:none;
width: 200px;

list-style: none;
}

.menu li{
}

.menu a {
display: block;

margin:0px;
padding:10px;
padding-left:15px;
text-decoration: none;
color: #0088cc;
background:#0088cc;
color:white;
border-bottom:2px solid #2c3e50;

}

.menu .active a {color:white; background:#1abc9c; border-bottom:2px solid #2ecc71;
}
.menu a:hover{}

8

У Вас в .menu a неправильно задан background-color: там другой оттенок синего цвета. Возьмите из инструкции к заданию - будет 100%.

9

Почему нет href у ссылок, а само меню позиционировано?

11

Почему не применяется свойство к классу active?

Безымянный.png709×344 27.5 KB

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: 180px;
padding: 0px;
margin: 0px;
list-style:none;
}

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

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

12

Весьма странный формат задания фонового цвета - “color background”. + слово “главный” в английском языке пишется через A - mAin. Равно как и uchivment - такого слова нет. Есть achievement. Хотя последнее в данном случае ни на что не влияет.

1 лайк
13

color я забыл удалить , но и без него он не работает

14

Ошибку в слове mEin исправьте - пишется mAin! Иначе не совпадает класс в разметке и в CSS!

15

Точно, спасибо. Я не заметил.

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

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

.menu { text-decoration: none;
position: relative;
width: 200px;
padding: 0px;
list-style:none;
}

.menu li {border-bottom: 2px solid #2C3E50; }
.menu .active {border-color: #2ECC71;}
.menu .active a {background: #1abc9c; }

.menu a {
display: block;
padding: 10px;
padding-left: 15px;
background: #2980B9;
margin:0px;
color: white;
text-decoration: none;
}

Подскажите где ошибка?

17

Ваш код даёт у меня 100%. Какую конкретно ошибку Вы не можете исправить?

18

в различиях и наложении идет смещение как мне кажется

19

Ошибку воспроизвёл - такое может быть только в том случае, если Вы удалили то, что было сверху по умолчанию:
html,
body {
margin: 0;
padding: 0;
}

20

Спасибо за помощь

21

Всё заработало?

22

Теперь работает

вертикальное меню.jpg1295×754 123 KB