Перекрывающиеся вкладки CSS разной ширины

Я нахожу множество руководств по CSS, которые отлично подходят для перекрывающихся вкладок, но ни в одном из них нет разной ширины для каждой вкладки. Возможно ли вообще изменить ширину в зависимости от размера заголовка?

Вот 3 вкладки в качестве примера того, как они различаются.

О нас | Автостекло для вашего автомобиля | Аварийные и деловые стеклянные услуги

Примечание. Графика для вкладки имеет затенение и, конечно, будет PNG 24, поэтому она будет перекрываться, но я не представляю, как изменить ширину.

Будет ли часть изображения повторять x? Если да, то как бы вы поставили заглушки и по-прежнему основывались на активной вкладке?

EDIT: Вот ссылка, показывающая, что каждая вкладка имеет ОДИНАКОВУЮ длину со статическим изображением для вкладки. Мне нужно выяснить, как сделать то же самое, но с возможностью средней части вкладки «расти» по ширине в зависимости от заголовка вкладки: http://code-pal.com/examples/how-to-code-an-overlapped-menu/


css tabs overlapping
person LITguy    schedule 09.08.2012    source источник
comment
Я смущен. Было бы очень полезно, если бы вы разместили какую-то справку или, может быть, jsFiddle!   -  person JCOC611    schedule 09.08.2012
comment
Не могли бы вы привести пример того, что у вас есть до сих пор? Попробуйте jsfiddle.   -  person Keiran Lovett    schedule 09.08.2012
comment
Я добавил ссылку в поле EDIT, показывающую обычный способ создания вкладки со статическим изображением. Нужна возможность повторения-x для увеличения ширины по мере необходимости.   -  person LITguy    schedule 09.08.2012

Ответы (3)


arrow_upward
2
arrow_downward

Я думаю, что этот урок действительно поможет вам. Он делает перекрывающиеся вкладки с переменной шириной точно так, как вы просите. Он не кажется бесконечно широким, но вам просто нужно отрегулировать длину более длинных сторон, чтобы они были длиннее, чем они должны быть.

http://www.codealamode.net/overlapping-tabs

person Gabriel Syme    schedule 09.08.2012
comment
Это ИМЕННО то, что я ищу. Великолепно! Я уже начал думать, что это невозможно. Благодарю вас! - person LITguy; 09.08.2012

arrow_upward
0
arrow_downward

Используйте прокладку.

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2 is really long</li>
    <li>Item 3</li>
</ul>

CSS

ul li {
    display: inline-block;
    padding: 0 25px;
    background: #F00;
    color: #FFF;
}

Ознакомьтесь со скриптом.

person D.A    schedule 09.08.2012
comment
Спасибо. Я понимаю, как это сделать без изображений. Мне нужно иметь возможность увеличить ширину фонового ИЗОБРАЖЕНИЯ. Вы не можете сделать это со статичным изображением и растянуть его или исказить. - person LITguy; 09.08.2012
comment
Как затенение? Уловка, которую я использовал раньше, заключается в том, чтобы сделать оттенок изображения сплошным цветом и установить этот цвет в качестве фона. - person D.A; 09.08.2012

arrow_upward
-1
arrow_downward

Я полагаю, что вы ищете несколько фонов, поддерживаемых в CSS3.

Скоро выложу демо.

EDIT: Был принят другой ответ, я не публикую демонстрацию.

person A.M.K    schedule 09.08.2012