Загвоздка

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

Привет всем!
Помогите понять где ошибка?

вот код
CSS

body {
font-family:Arial, sans-serif;
font-size:14px;
line-height:1.4;
padding:;10px
}
ul.main-menu {
margin:0;
padding:0;
list-style:none;
}

HTML

<!DOCTYPE html>
<html>
<head>
<title>Сбрасываем стили списка</title>
<meta charset="utf-8">
</head>
<body>
<div class="main-menu">
<ul>
<li><a href="#company">О компании</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#team">Сотрудники</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
</div>
</body>
</html>

Все как в задании - а не работает!

2

Вставил этот код в задание, все работает, проверка пройдена. Класс правильно поставлен в ul?

3
блин как html код у вас форматируется? https://www.dropbox.com/s/ny0bjlxt1b49mvu/HTML.doc?dl=0 так что ли?
4

Копируешь код, выделяешь его, нажимаешь Ctrl + K

5

Класс надо задать не блоку div, а списку ul. В этом ошибка.

6

то есть как?

7

Не так:

<div class="main-menu">
...
</div>

А так:

<ul class="main-menu">
...
</ul>
8

Спасибо

body {
font-family:Arial, sans-serif;
font-size:14px;
line-height:1.4;
padding:;10px
}
.main-menu{
	border:1px solid #E5E5E5;
	padding:0;
	margin:0;
	width:180px;
	background:#F5F5F5;
   list-style:none;
}
.main-menu li{ 
	padding:0;
	margin:0;
}
.main-menu a{ 
	padding:8зч 14зч ;
	color:#0088CC;
}

не работает!

display:block;
куда?

9

Из этих 4-х правил, только одно для ссылок, в него и вставлять.
Тег ссылки <a></a>

10

не забудьте исправить на px

11

Исправил - и даже немного вперед продвинулся

теперь тут проблемка

.main-menu a{
text-decoration:none;
border:1px solid #E5E5E5;
margin-bottom:-1px;
display:block;
padding:8?? 14?? ;
color:#0088CC;
}
.main-menu a:hover{
background: #F5F5F5;
}
.main-menu .active a{
color: white;
background: #0088CC;
}
.main-menu{
padding:0;
margin:0;
width:180px;
background:none;
list-style:none;
}
body {
font-family:Arial, sans-serif;
font-size:14px;
line-height:1.4;
padding:;10px
}

  • О компании
  • Услуги

    Разве же второму пункту меню класс active Не добавлен?
    ведь не работает код-то

12 
<body>
<ul class="main-menu">
<li><a href="#company">О компании</a></li>
<li class="active" href="#services">Услуги
13

и так тож
или так все едино не работает

<ul class="main-menu">
<li><a href="#company">О компании</a></li>
<li class="active"><a href="#services">Услуги</a></li>
<li><a href="#team">Сотрудники</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
14

HTML

<ul class="main-menu">
        <li><a href="#company">О компании</a></li>
        <li class="active"><a href="#services">Услуги</a></li>
        <li><a href="#team">Сотрудники</a></li>
        <li><a href="#contacts">Контакты</a></li>
</ul>

CSS

.main-menu a{
    display:block;
    padding:8px 14px;
    margin-bottom:-1px;
    color:#0088CC;
    text-decoration:none;
    border:1px solid #E5E5E5;
}
.main-menu a:hover{
    background-color:#F5F5F5;
}
/* ссылка в меню, внутри элемента с классом .active */
.main-menu .active a{
    color:white;
    background-color:#0088cc;
}
.main-menu{
    width:180px;
    padding:0;
    margin:0;
    list-style:none;
}
body{
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height:1.4;
    padding:10px;
}
1 лайк