9/28 без блоков

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

Получила 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 {
list-style: none;
padding: 0;
width: 200px;
}

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

.main-menu a {
color: white;
text-decoration: none;
}

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

2

Теоритически можно, но ссылки у вас узкие. По ним неудобно переходить, если размер самих пунктов будет больше.

2 лайка
3

Исправила:
Вместо
<li class="active"><a href="#1">Демонстрации</a></li>
надо
<li><a href="#1" class="active">Демонстрации</a></li>.

В CSS .main-menu li {…} отменяется, а все свойства переходят в
.main-menu a { color: white; padding: 10px 15px; text-decoration: none; display: block; border-bottom: 2px solid #2c3e50; background-color: #2980b9; }

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

1 лайк
4

97% Границы блоков ссылок 2px. В “Различия” получается вот так:

Как будто нужно opacity добавить в границы.

CSS

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

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

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

5

Цвет не тот просто. Будьте внимательны, все цвета есть в теории к заданию.

1 лайк
6

Догадался пять минут назад)

7

Мучался с данным испытанием пол дня, но в итоге прошел на 100% с помощью кода автора поста. За что ему/ей СПАСИБО!
Как я заметил многие кто проходил данное испытание приписывали ко второму пункту меню класс, или как в данной теме сделанно. Либо я не правильно понял условие задания, либо ошибка в системе проверки, так как по моему способу 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;
}

li {
    position: block;
    width: 170px;
    list-style: none;
    padding: 10px 15px;
    background: #2980b9;
    border-bottom: 2px solid #2c3e50;
    
}
a {
    text-decoration: none;
    color: #ffffff;
}

li:hover {
    background: #2ecc71;
    border: none;
}
    
li:active {
    background: #1abc9c;
    
}

.main-menu {
    position: relative;
    top: 0px;
    left: -40px;
}
8

Расскажите, что вот это такое?

9

спасибо что подметили, просто пропустил, не удалил. То пока я пробовал методом проб и ошибок довести код до ума остался “мусор”. Данная строчка ни на что не влиеят, так как в описании класса
.main-menu прописал position: relative, для того, чтобы иметь возможность поставить div-блок в нужном мне месте.

10

Неправильно сделали. Меню не надо позиционировать. Вы забыли обнулить отступы у списка.