Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!







#1 13.03.2013 10:42

narby
Новичок
Зарегистрирован: 22.02.2013
Сообщений: 7

Помогите доверстать

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


Код:

#list ul li a  {display:block; height:25px; background: #CDA175;margin-top:5px; padding:5px 0 0 13px;color:#2B1500;}

Нет на форуме

 

#2 13.03.2013 12:42

Newone
Разбирающийся
Зарегистрирован: 17.10.2012
Сообщений: 89

Re: Помогите доверстать

Кроссбраузерно и универсально никак.
IE не понимает селекторы "+", псевдоcелекторы last-child и first-child.
Только если представить что пунктов только 3, что каждый пункт никогда не будет двустрочным и что можно именно картинкой сразу заложить высоту бекграунда A (тот, который #list ul li a {background: #CDA175;}), тогда лепим в фотошопе на прямоугольники цвета #CDA175 и нужного размера последовательно все три картинки, далее:
- Oбернуть все это дело еще дивом, задать ему в стилях background: url("путь/рисунок1") no-repeat left top /* или подогнать с помощью em четко на свое место под первую ячейку*/;.
- На DIV#list в стилях повесить background: url("путь/рисунок2") no-repeat left 50% /* или подогнать с помощью em четко на свое место под вторую ячейку по горизонтали, в % по вертикали*/;
- Далее, на DIV#list UL в стилях повесить background: url("путь/рисунок3") no-repeat left bottom /* или подогнать с помощью em четко на свое место под третью ячейку по горизонтали, в % по вертикали*/;

И последним этапом отобрать бекраунд у A : #list ul li a {background: transparent;}.

Но это конечно, идиотизм )))


PS:
"Только если представить что пунктов только 3" - подумав, пришел к выводу что это не принципиально, их может быть и больше, но каждый новый пункт захочет добавления еще одного оберточного DIV-a и постоянного переписывания %-ых значений вертикального выравнивания у остальных ячеек, оно вам надо???

Короче, точно полнейший идиотизми.

Легче добавлять смысловые семантические классы, немного сложнее назначать классы с помощью js только для IE и применить конструкцию для всех остальных браузеров вида

UL LI{background: url("путь/рисунок2")}
UL LI:first-child{background: url("путь/рисунок1")}
UL LI:last-child{background: url("путь/рисунок3")}

И для большего количества пуктов меню:
UL LI:first-child + LI{background: url("путь/рисунок4")}
UL LI:first-child + LI + LI{background: url("путь/рисунок5")}
и т.д.

Отредактированно Newone (13.03.2013 12:56)

Нет на форуме

 

#3 13.03.2013 16:29

narby
Новичок
Зарегистрирован: 22.02.2013
Сообщений: 7

Re: Помогите доверстать

спасибо smile, а если список многоуровневый и нужно изменить бекграунды (около 5шт) только первого уровня,  т.е. link 1, link 2 а подпункты link1.1, link1.1.1не трогать?

Код:

#list ul li a  {display:block; height:25px; background: #CDA175;margin-top:5px; padding:5px 0 0 13px;color:#2B1500;}

Нет на форуме

 

#4 13.03.2013 18:25

narby
Новичок
Зарегистрирован: 22.02.2013
Сообщений: 7

Re: Помогите доверстать

после целого дня издевательств над списком нашел решение:

Код:

#list ul li a[title='1'] {background-color: #FF0000;}
#list ul li a[title='2'] {background-color: #FFFF00;}
....

и ссылкам внутри лишек даем соответствующие тайтлы.

З.Ы. ппц а все  было так просто... Каждий день узнаешь что-то новое (хотя опыт и сознание принуждает думать, что знаешь уже абсолютно все) smile

Отредактированно narby (13.03.2013 18:40)

Нет на форуме

 

#5 13.03.2013 19:53

Newone
Разбирающийся
Зарегистрирован: 17.10.2012
Сообщений: 89

Re: Помогите доверстать

Решение с тайтлами то же самое что и решение с добавлением классов, причем оно более глупое, так как татлы не отработаются в IE6
/2008/01/08/css-selectors/

Нет на форуме

 

#6 15.03.2013 23:55

narby
Новичок
Зарегистрирован: 22.02.2013
Сообщений: 7

Re: Помогите доверстать

Newone написал:

Решение с тайтлами то же самое что и решение с добавлением классов, причем оно более глупое, так как татлы не отработаются в IE6
/2008/01/08/css-selectors/

1)в моем случае данный вариант лучший с десятка других..
2) не тоже самое что классами! так как список генерится динамически и при добавлении пункта можно прописать к нему как тайтл так и имя...
3) я сделал привязку к "name" ане "title"
4) в IE6 все работает без проблем


з.ы. предложи свой "не глупый" вариант,  раз ты такой умный, ато языком ля-ля все умные, ближе к делу и по теме!...

Нет на форуме

 

#7 16.03.2013 12:31

Newone
Разбирающийся
Зарегистрирован: 17.10.2012
Сообщений: 89

Re: Помогите доверстать

narby написал:

Newone написал:

Решение с тайтлами то же самое что и решение с добавлением классов, причем оно более глупое, так как татлы не отработаются в IE6
/2008/01/08/css-selectors/

1)в моем случае данный вариант лучший с десятка других..
2) не тоже самое что классами! так как список генерится динамически и при добавлении пункта можно прописать к нему как тайтл так и имя...
3) я сделал привязку к "name" ане "title"
4) в IE6 все работает без проблем


з.ы. предложи свой "не глупый" вариант,  раз ты такой умный, ато языком ля-ля все умные, ближе к делу и по теме!...

Короче, что-то я не понимаю.
если можно прописать тайтл, разве нельзя приписать класс????  Для чего назначать что либо, например бессмысленный тайтл, который, вдобавок будет показываться при наведении, или, тем более невалидный "name"??? Если нету возможности добавлять классы там, где можно добавлять все остальное - боюсь этот как минимум скрипт "не для этого".
"3) я сделал привязку к "name" ане "title""  - перечитайте Ваши посты выше.

В общем, я спорить с Вами не собираюсь, еще до того как Вы предложили предоставить "неглупое" решение, я предложил Вам несколько вариантов. Извините за слово "глупое". Я его применил только в качестве оценки именно способа. Очень жаль что вы почему-то восприняли как-то иначе, на уровне чего-то личного, чтоли.

P.S:
Интересно было бы увидеть список из десяти менее удачных решений, кстати...

Отредактированно Newone (16.03.2013 12:35)

Нет на форуме

 

Board footer

выставочные стенды |теплоход ресторан