Испытание [9/28]

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

Подскажите, не могу понять почему на отступы мини-браузер реагирует, а на отмену декорирование и другое нет. Где-то ошибка, не могу понять где именно.

испыт9.28.png1366×768 131 KB

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

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

.mein-menu {
list-style: none;
padding: 10px 15px;
margin: 0px;
width: 200px;
}

.mein-menu li {
margin-bottom: 8px;
}

.main-menu a {
display: block;
color: #FFFFFF;
border: 2px solid #2C3E50;
margin-bottom: -1px;
text-decoration: none;
border-bottom: 2px solid #2C3E50;
}

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

.main-menu a:hover {
background-color: #2ECC71;
}

HTML

Испытание: вертикальное меню
4

Кнопка для вставки HTML-кода </>

5

<body> <ul class="mein-menu"> <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>

6

Ошибка в названии класса: пишется main-menu.

1 лайк
7

Спасибо) Вот догадывалась, что глупый косяк))

1 лайк
8

Подскажите. Не пойму почему на последней ссылке рамка снизу двойная. По коду повторений нет.

маст меню.png1366×768 133 KB

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

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

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

.main-menu li {
background: #2980B9;
}

.main-menu a {
display: block;
color: #FFFFFF;
margin-bottom: -1px;
text-decoration: none;
border-bottom: 3px solid #2C3E50;
padding: 10px 15px;
}

.main-menu .active a {
color: white;
background: #1ABC9C;
border-bottom: 3px solid #2ECC71;
}

.main-menu a:hover {
background-color: #2ECC71;
}

9

Рамка снизу шириной в 2px, тогда и отрицательный отступ не нужен.

1 лайк
10

Спасибо) Увидела в теории было указано)

1 лайк
12 
можно куда проще сделать и без ссылок и без классов на 100%

     
    
       <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title>Испытание: вертикальное меню</title>
            </head>
            <body>
                <ul>
                <li>Курсы</li>
                <li>Демонстрации</li>
                <li>Участники</li>
                <li>Достижения</li>
                <li>Профиль</li>
                </ul>
            </body>
        </html>
13 
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{margin:0px;
        padding:0px;
        background-color:#2980B9;
        width:200px;
    }
    li{
        list-style:none;
        color:#fff;
        border-bottom:2px solid #2C3E50;
        padding:10px;
        padding-left:15px;
        }
    li:nth-child(2){
        border-bottom: 2px solid #2ECC71;
        cursor:pointer;
        background-color:#1ABC9C;
        }    
    li:hover{
        border-bottom: 2px solid #2ECC71;
        cursor:pointer;
        background-color:#1ABC9C;
        }
14

Это меню. Ссылки вы убрать не можете.

1 лайк