Как сверстать такой фон?

[dididima]

Подскажите как сверстать такой фон резиновым?

Для пункта меню li

[Softlink]

http://habrahabr.ru/blogs/webdev/128210/

[zSpx]

1. сам li + ::after и ::before (т.е. для списка делаем фон повторяющийся и псевдоэлементами добавляем левую и правую части изображения с тенями. для IE сгодится экспрешн.

2. экстра-разметка. добавляем 2 элемента, абсолютно позиционируем их по краям li и задаем им фон (либо влаживаем друг в друга, как удобней). Или запросто с конструкцией li>a>span

Edited September 27, 2011 by zSpx

[dididima]

2Softlink

Меня интересует больше то, как разделить фон на 3 части (ну это я понимаю) и для каких элементов применять как юзать :before :after и т.д

Edited September 27, 2011 by dididima

[Softlink]

2Softlink

Меня интересует больше то, как разделить фон на 3 части (ну это я понимаю) и для каких элементов применять как юзать :before :after и т.д

плохо видно, он там с рисунком или просто несколько цветов?

[dididima]

Подскажите почему данный код не работает?

#top-menu li:after {
	background: url(img/after.png);
	width: 21px;
	height: 57px;
}
#top-menu li:before {
	background: url(img/before.png);
	width: 21px;
	height: 57px;
}
#top-menu li {
	background: url(img/bg-li.png);
	height: 57px;	
}

Отображается только фон для li

Edited September 27, 2011 by dididima

[Softlink]

Подскажите почему данный код не работает?

#top-menu li:after {
	background: url(img/after.png);
	width: 21px;
	height: 57px;
}
#top-menu li:before {
	background: url(img/before.png);
	width: 21px;
	height: 57px;
}
#top-menu li {
	background: url(img/bg-li.png);
	height: 57px;	
}

Для псевдоэлементов обязательное свойство content есть. Его надо указать.

[psywalker]

dididima, Лови, дружище http://psywalker.ru/Forum/Menu/10/menu/main-page.html

[dididima]

Фон нормально отображается только при значении content:'.'; к примеру. Как фиксить?

[SelenIT]

По-моему, с display:block нормально и content:'' работает.

[dididima]

А если мне надо пункты в меню выстроить в одну линию как переобразовать данный код?

#top-menu li:after {
    background: url(img/after.png) no-repeat;
    width: 21px;
    height: 57px;
	content: '';
	display:block;
}
#top-menu li:before {
    background: url(img/before.png);
    width: 21px;
    height: 57px;
	content: '';
	display: block;
}
#top-menu a {
	background:url(img/bg-li.png);
    height: 57px;  
	display:block;
}

[Softlink]

dididima, еще можно позиционирование использовать

[SelenIT]

Как вариант, вместо block можно inline-block использовать.

Всё-таки совсем без экстра-разметки не получается, может, кто предложит лучше?

Upd.: в порядке курьеза добил вариант без экстра-разметки (заодно поправил для IE9), но копировать его не стоит — логика оформления там никудышняя...

Edited September 27, 2011 by SelenIT

[dididima]

2SelenIT Благодарю, если возникнут еще какие-то вопросы отпишусь