Каталог сайта лестницей

Bel.site

Создатель
Регистрация
23 Апр 2015
Сообщения
42
Реакции
7
Добрый вечер друзья, подскажите пожалуйста, как сделать меню лестницей сейчас оно вот такое:
Screenshot (2).png

Но хочу сделать вот такое:
Screenshot (3).png

Не могу сделать голова уже болит....
 

Provokator86

Мой дом здесь!
Регистрация
27 Май 2012
Сообщения
365
Реакции
236
Добрый вечер друзья, подскажите пожалуйста, как сделать меню лестницей сейчас оно вот такое:
Посмотреть вложение 83692

Но хочу сделать вот такое:
Посмотреть вложение 83693

Не могу сделать голова уже болит....
Css: margin-left: 10px; к <li> каждого пункта
Вообще не плохо было бы показать пример кода
 

diex

Постоялец
Регистрация
21 Апр 2013
Сообщения
193
Реакции
149
Добрый вечер друзья, подскажите пожалуйста, как сделать меню лестницей сейчас оно вот такое:
Посмотреть вложение 83692

Но хочу сделать вот такое:
Посмотреть вложение 83693

Не могу сделать голова уже болит....
все довольно просто, допишите CSS стиль для вашего меню:

ul li:nth-child(1) {
margin-left: 0px!important;
}
ul li:nth-child(2) {
margin-left: 10px!important;
}
ul li:nth-child(3) {
margin-left: 25px!important;
}
и т.д.
 

Bel.site

Создатель
Регистрация
23 Апр 2015
Сообщения
42
Реакции
7
все довольно просто, допишите CSS стиль для вашего меню:

ul li:nth-child(1) {
margin-left: 0px!important;
}
ul li:nth-child(2) {
margin-left: 10px!important;
}
ul li:nth-child(3) {
margin-left: 25px!important;
}
и т.д.
А как сделать что 1 урл был красным как на скрине?
 

diex

Постоялец
Регистрация
21 Апр 2013
Сообщения
193
Реакции
149
Помогло очень спасибо. А как сделать и тут лестницей имея Название статьи и краткое описание
Посмотреть вложение 83704
Они имуют 2 класса
Как бы в этом же стиле, подставляйте вместо тега свой класс:

Код:
li:nth-child(5n + 1) {
    margin-left: 0px;
}
li p:nth-child(5n + 1) {
    margin-left: 5px;
}
li:nth-child(5n + 2) {
    margin-left: 10px;
}
li p:nth-child(5n + 2) {
    margin-left: 15px;
}
 

Bel.site

Создатель
Регистрация
23 Апр 2015
Сообщения
42
Реакции
7
Как бы в этом же стиле, подставляйте вместо тега свой класс:

Код:
li:nth-child(5n + 1) {
    margin-left: 0px;
}
li p:nth-child(5n + 1) {
    margin-left: 5px;
}
li:nth-child(5n + 2) {
    margin-left: 10px;
}
li p:nth-child(5n + 2) {
    margin-left: 15px;
}
Да тоже помогло, только вот ещё вопрос
Screenshot (2).png
Чёрточку по меж их <hr> как влепить?
 

diex

Постоялец
Регистрация
21 Апр 2013
Сообщения
193
Реакции
149
А как сделать что 1 урл был красным как на скрине?
Чтобы ссылка была красного цвета статически, то нужно прописать для этого элемента:
li a:nth-child(5n + 3) {
color: #ff0000;
}

Да тоже помогло, только вот ещё вопрос
Посмотреть вложение 83708
Чёрточку по меж их <hr> как влепить?
Это уже нужно смотреть в шаблоне вывода материалов, через CSS это не могу сделать, можно попробовать с помощью JavaScript, но лучше всего поправьте шаблон вывода новостей.
 
Последнее редактирование модератором:

Bel.site

Создатель
Регистрация
23 Апр 2015
Сообщения
42
Реакции
7
Это уже нужно смотреть в шаблоне вывода материалов, через CSS это не могу сделать, можно попробовать с помощью JavaScript, но лучше всего поправьте шаблон вывода новостей.
Screenshot (3).png Не выходит чтоб урл 1 был красным
 
Сверху