Подскажите, как можно сверстать такое?

[d0ublezer0]

Задача - верхняя полоса и сами кнопки-переключалки - резиновые

У меня как-то получается очень много вложенных вспомогательных элементов.

Для меня это оказалось то ли слишком сложно, то ли я уже устал..

Не прошу верстать за меня, просто подкиньте идею, как лучше сделать?

[warobushek]

а верхняя полоска каким образом резиновая?

[d0ublezer0]

а верхняя полоска каким образом резиновая?

По всей ширине страницы.

На самом деле резиновая правая часть (хвост) должна остаться до края родительского элемента

[warobushek]

а, ну понятно, т.е. ширина, а внешний вид при переключении пунктов меню один и тот же?

[d0ublezer0]

Собственно, проблема в наложении косых линий. Стыки как-то делить на две части что ли, Или делать отрицательные маргины для элементов...

Активная вкладка должна быть с подложкой. Вот этого и пытаюсь добиться

[warobushek]

попробуйте как нибудь так

				    <ul class="menu">
					    <li>
						    <div class="l"></div>
						    <div>item 1</div>
						    <div class="r"></div>
					    </li>
					    <li class="active">
						    <div class="l"></div>
						    <div>item 2 active</div>
						    <div class="r"></div>
					    </li>
				    </ul>

[121990]

@d0ublezer0, юзай псевдоэлементы :after, :before

Edited August 13, 2013 by 121990

[npofopr]

Я на 95% уверен, что тут есть похожее меню http://www.cssplay.co.uk/menus/ но искать нет времени, посмотрите

[d0ublezer0]

Я на 95% уверен, что тут есть похожее меню http://www.cssplay.co.uk/menus/ но искать нет времени, посмотрите

Честно - не нашел.

121990, слишком современно

warobushek, опять же - элементы.

Попробую сам.

[121990]

121990, слишком современно

[d0ublezer0]

Ладно, уговорил!

[d0ublezer0]

Ну как-то так:

http://leveler.ru/spman/

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

[d0ublezer0]

Хотя нет, придумал.

[Struggle]

Хотя нет, придумал.

Может выложишь способ?

А то я справлялся через absolute и z-index

Edited August 14, 2013 by Struggle

[d0ublezer0]

Может выложишь способ?

Хм. Так он в общем-то на странице. Ссылка выше

Я использовал трюк с overflow:hidden для последнего пункта списка, который был создан специально для растяжения.

UPD: Надо отметить что это (последний пустой пункт списка) не сработало в IE8

Edited August 14, 2013 by d0ublezer0

[SelenIT]

Это :last-child там не сработал. А почему бы просто не положить белую полоску фоном на ul?

[d0ublezer0]

А почему бы просто не положить белую полоску фоном на ul

По замыслу дизайнера верхняя полоска должна заканчиваться скругленными уголками слева и справа. Это можно увидеть, убрав у первого пункта списка класс active (для последнего еще не сделал)

И да, менюшка должна быть прозрачной. Там какой-то цветной фон будет.

Edited August 14, 2013 by d0ublezer0

[antonKar]

Я бы делал как (рассказываю на схеме ul+li):

1) Для ul делаем полностью заливку всего этого синего фона градиентного (насколько я вижу по картинке можно это сделать на CSS через градиенты и скругление сверху);

2) Для li делаем background: white, а для активного пункта меню делаем background: transparent.

3) Для создания косых скруглённых линий нарезаем левую и правую части в PNG (чтобы белый цвет косой скруглённый накладывать) и через :before и :after делаем наложение сверху на активную li (хотя этот способ с вероятностью в 95% может не сработать в IE8, у него проблемы с этим, если нужна его поддержка, то придётся наложением этих частей делать через две дивки внутри li).

Вот как-то собственно и всё.

[d0ublezer0]

Вот за border-radius у UL спасибо, а то я что-то ступил и пытался через :before и :after отдельной картинкой делать.

А в остальном ваши вариации не выдерживают задачу оформления: меню должно быть прозрачное везде, где оно без синего градиента. Т.е. белой заливки быть не может.

[antonKar]

А в остальном ваши вариации не выдерживают задачу оформления: меню должно быть прозрачное везде, где оно без синего градиента. Т.е. белой заливки быть не может.

В смысле должен быть виден фон страницы (или что-то типа такого)?

Тогда делаем так:

1) В ul делаем верхнюю полосу картинкой, делаем border-radius;

2) Активному li делаем картинкой фон (градиенты не подойдут).

3) Делаем этот пункт также, как в моём предыдущем посте, но теперь мы нарезаем не белый фон для наложения, а синий градиентный фон.

Вуаля, под задачу оформления всё выдерживает.

[d0ublezer0]

Вуаля, под задачу оформления всё выдерживает.

Опять мимо.

В чем ошибка на этот раз: если горизонтальная полоска картинкой положена фоном в ul и при этом мы имеем "прозрачные" li (при этом допускаем, что активная li имеет цветную заливку, но не забываем о том, что заливка фигурная, скошенная) получается, что за первым li-элементом всегда будет видно фон от ul (а последний li-элемент нам до фени, он никогда не будет прижат к правому краю).

Добавил фон, чтобы было понятно, как ведут себя вкладки.

Прошу обратить внимание на реализацию на странице. Ну всё же уже сделано. Есть косяки с отступами, но это черновая версия, показать технику.

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

Прикручивать скрипты для смены классов - лениво.

Edited August 14, 2013 by d0ublezer0

[antonKar]

если горизонтальная полоска картинкой положена фоном в ul и при этом мы имеем "прозрачные" li (при этом допускаем, что активная li имеет цветную заливку, но не забываем о том, что заливка фигурная, скошенная) получается, что за первым li-элементом всегда будет видно фон от ul

"за первым li-элементом" - это до или после первого li элемента? Хотя я в любом случае не вижу никаких проблем всё настроить через margin как для li, так и для псевдоэлементов li.

Плюс в моей реализации не будет проблем со скачущим левым верхним углом.

[d0ublezer0]

Прям так и хочется воскликнуть "Чем дакажищь?" (с)

это до или после первого li элемента?

под ним

Плюс в моей реализации не будет проблем со скачущим левым верхним углом.

Это поправимо и у меня. Еще раз повторюсь, делал на коленке.

А если серьезно: будет время - накидай, посмотрим.

[antonKar]

Ок, на выходных сделаю.