[28/28] 100% Буду благодарен за совет! Каким образом расположить правила CSS для SEO

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

Я знаю, что сейчас в конторах которые занимаются SEO начали появляться автоматические анализаторы и они промониторив сайт выдают мол, там то и там то css можно сократить, там подчистить итд, для улучшения загрузки страницы. Правда ли это?
Если все это чепуха и не стоит пока обращать внимания, то тоже жду комментариев, Спасибо!

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

body {
    width: 380px;
    min-height: 280px;
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #ecf0f1;
}
.main-menu {
    width: 200px;
    padding: 0;
    margin: 0;
    position: relative;
}
.main-menu .sub-menu {
    display: none;
    position: absolute;
    width: 200px;
    left: 140px;
    top: 41px;
}
.main-menu > li {
    display: block;
    background-color: #2980b9;
    border-bottom: 2px solid #2c3e50;
    padding: 10px 15px;
}
.main-menu .sub-menu li {
    display: block;
    background-color: #1abc9c;
    border-bottom: 2px solid #2ecc71;
    padding: 10px 15px;
}
.main-menu ul {
    list-style: none;
}
.main-menu a {
    text-decoration: none;    
    color: white;
}
.main-menu > li:hover {
    background-color: #1abc9c;
}
.main-menu > .opened:hover .sub-menu {
    display: block;
}
2

Мда забавно, было 100%, решил добавить интерактива, что по идее и требует задание и уже нифига не 100, бред какой-то. Ну да ладно, Вот код без выпадающего списка

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

    body {
        width: 380px;
        min-height: 280px;
        padding: 10px;
        font-family: "Arial", sans-serif;
        font-size: 14px;
        line-height: 1.4;
        background: #ecf0f1;
    }
    .main-menu {
        width: 200px;
        padding: 0;
        margin: 0;
        position: relative;
    }
    .main-menu .sub-menu {
        
        position: absolute;
        width: 200px;
        left: 140px;
        top: 41px;
    }
    .main-menu > li {
        display: block;
        background-color: #2980b9;
        border-bottom: 2px solid #2c3e50;
        padding: 10px 15px;
    }
    .main-menu .sub-menu li {
        display: block;
        background-color: #1abc9c;
        border-bottom: 2px solid #2ecc71;
        padding: 10px 15px;
    }
    .main-menu ul {
        list-style: none;
    }
    .main-menu a {
        text-decoration: none;    
        color: white;
    }
    .main-menu > li:hover {
        background-color: #1abc9c;
    }
    .main-menu > .opened {
        background-color: #1abc9c;
    }
3

Пункты списка li являются блочными элементами по умолчанию. Размеры пунктов меню задаются отступами, в этом вы правы. Только отступы прописываются для ссылок.
Положение подменю должно рассчитываться относительно пункта меню, к которому оно относится, а не к списку меню в целом.

4

А что нужно сделать, для того что бы положение подменю расчитывалось относительно его родительского пункта в меню?

Пункты списка li являются блочными элементами по умолчанию. Размеры пунктов меню задаются отступами, в этом вы правы. Только отступы прописываются для ссылок.

Указывать отступы для ссылок а не для пунктов меню, протестил сейчас, чет все вкривь и вкось поехало.

Убрал отступы у пунктов меню и добавил их к ссылкам.
Или мы о разных вещах говорим?

image
image.png984×724 53.1 KB

5

Это очевидно - задать пунктам основного списка относительное позиционирование.

Ссылки блочными не являются. Что же делать?

6

Чисто текнически я понял как это сделать, допустим.
image

А в чем принципиальная разница, чисто практически? На что в будущем это может повлиять?

Тот же вопрос в практичности для ссылок, где размеры задавал я для пунктов меню а не для ссылок. image

Интересный метод наталкивать на решение))))))

7

Готовых ответов на форуме много. Если вы их не ищете, значит хотите сами прийти к правильному решению.

Вот вам площадка для творчества: http://codr.io/rvpsyjm
Сделайте еще одно выпадающее подменю и попробуйте отобразить каждое при наведении на пункты основного.

Задавая отступы ссылкам, вы увеличиваете зону для клика по пункту меню.

8

Хорошее пояснение) С каждым днем умнею.

Я подробно разбираю каждое задание, мне не интересен сам факт пройти)

Вы где-то тему создавали с сайтом http://www.itmathrepetitor.ru/zadachi-po-html-i-css/ там я тоже сижу) но когда понял, что не выводу пошел вот в академию, скоро опять туда пойду)

Спасибо!

9

Не хотите поделиться ссылкой на свои работы?

10

Да какие там работы) я прошел курсы в приложении на телефоне sololearn и пошел искать задачки в интернете, штук 20 сделал и понял, что не вывожу уже и пошел учиться дальше в академию, скоро опять начну решать и поделюсь ссылкой. )

11

Sololearn скучная теория с вопросами для самопроверки, на мой взгляд…

1 лайк
12

И поэтому я здесь)

1 лайк
13

Можете подсказать, как правильно выучить front-end ? Что учить сначала, что потом? Книги, сайты, ресурсы ?
Судя по вашей активности на данном ресурсе, вы шарите :slight_smile:

14

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

body {
width: 380px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 200px
}
a {
display: block;
color: #ffffff;
text-decoration: none;
background-color: #2980b9;
padding: 10px 0 10px 15px;
border-bottom: 2px solid #2c3e50
}

.main-menu .open {
position: relative;
background-color: #1abc9c
}

.main-menu .open a{
background-color: #1abc9c
}

.main-menu .open .sub-menu {
position: absolute;
left: 180px;
top: 0px;
z-index: 10;
}

.main-menu .open  .sub-menu a {
  border-bottom: 2px solid #2ecc71
}