Мастерская: создаём меню / Испытание: вертикальное меню [9/28]

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

допоможіть будь ласочка

2

я ширину в боді добавила 280рх,знизу почало червоненьким світити теж

3

Очень плохо сделано. Во-первых, где ссылки у меню?
Во-вторых, стили для body изменять не надо, и добавлять ничего тоже не надо. Сбросьте код и сделайте, как полагается. Чтобы внутри каждого li еще ссылка была.
Визуального соответствия здесь мало.

4

так ліпше?

5

Намного лучше. Осталось только задать ссылкам блочный тип (display: block;) и написать padding: 10px 15px; для ссылок, а не для li.

6

мерсі))

7

HTML - code

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

CSS - code
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;
margin: 0px;
padding: 0px;
width: 200px;
margin-top: 14px;
}
.main-menu a {
color: #ffffff;
text-decoration: none;
background: #2980b9;
padding: 10px 15px;
display: block;
border-bottom: 2px solid #2c3e50;
}
.main-menu .active a {
background: #1abc9c;
border-bottom: 2px solid #2ecc71;
}

Сделал со второй попытки

8

Доброго времени суток. Оцените, пожалуйста, код. Насколько он плох, несмотря на 100%. PS - то,что нужно было внутри элементов списка оформить ссылки - знаю, что-то лень стало. Насколько плохо было применить абсолютное позиционирование для всего меню и как его переместить без этого? что-то я не соображу, ведь отступы как внутренние так и внешние вроде получается не влияют и больше переместить не могут, или я не прав? Заранее спасибо.

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;
color:#ffffff;
}

.main-menu li {
display:block;
border-bottom: solid #2c3e50 2px;
list-style:none;
padding:none;
margin:none;
min-height:40px;
width:200px;
padding:10px;
padding-left:15px;
box-sizing:border-box;
background:#2980b9}
.main-menu {
display:block;
position:absolute;
left:-30px;
padding:none;
margin:none;
}
.main-menu li:nth-child(2) {
background:#1abc9c;
border-bottom:solid #2ecc71 2px;
}

9

Не пойдёт. Оформляйте, как положено. HTML-код + CSS.
Никакого абсолютного позиционирования для простого вертикального меню.[quote=“ValentinValidniy, post:8, topic:4240”]
padding:none;
margin:none;
[/quote]

У этих свойств нет значения none. Если хотели обнулить, тогда margin: 0; например.
Обратите внимание, отступы обнуляются только у списка, то есть ul. Свойство list-style:none; относится также к списку.

Оценивать здесь к сожалению нечего, задание выполнено плохо.
Перечитывайте теорию в заданиях 1-8.

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

CSS code

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 li {
display:block;
border-bottom: solid #2c3e50 2px;
padding:none;
margin:none;
min-height:40px;
width:200px;
padding:10px;
padding-left:15px;
box-sizing:border-box;
background:#2980b9
}

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

.main-menu li:nth-child(2) {
background:#1abc9c;
border-bottom:solid #2ecc71 2px;
}

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

11

Немного лучше.
Правда проигнорировали замечание по поводу:

padding:none;
margin:none;

Размеры пунктов меню - это должны быть размеры ссылок. Высоту задавать не надо. Пользуйтесь внутренними отступами. Элемент li - блочный по умолчанию, поэтому display: block; не пишется. А вот для ссылки, как строчного элемента, эта запись необходима.