Верстка: реализация «резиновых» кнопок

Практически на каждом сайте нужно реализовывать меню. Обычно в этом нет никакой проблемы — заворачиваем все в ненумерованный список — ul, прописываем все наобходимые стили и готово.
Но очень часто дизайнеры, пытаясь создать очередной мегаопупительный макет, делают какие-либо 3D кнопки, либо кнопки с закругленными краями и кучей градиентов, либо еще что либо ужасное :)

Речь в данном топике пойдет о том, как реализовать такое меню, с учетом того, что размеры каждого пункта меню не фиксированны, то есть могут «тянуться».


Итак, мы имеем какую-нибудь офигенную кнопку:


Задача состоит в том, чтобы сделать эту кнопку пунктом меню, причем так, чтобы она могла тянуться и по горизонтали и по вертикали. Обычно это делается вырезанием 4-ех уголков + 4-ех полосок (нижняя, верхняя и две боковые, все повторяються с использование свойства repeat) — соответственно нужны как минимум 8 (!) елементов, соответственно 8 картинок.

Я предлагаю сделать это иначе. Будем учитывать тот факт, что это пункт меню и абзаца текста в нем быть не может (то есть размеры ограниченны).

Для начала имеем обычную реализацию меню:

• О компании
• О жизни
• О жизни после смерти
• О смерти после жизни
• Фантазия закончилась

Увеличим нашу кнопку в размерах, с учетом максимальных размеров, которые она может принимать, к примеру вот так:


В HTML-код добавим несколько span-ов:

• О компании
• О жизни
• О жизни после смерти
• О смерти после жизни
• Фантазия закончилась

А вот и css:

ul
{
margin: 0;
padding: 0;
}

ul li
{
margin: 0;
padding: 4px 0;
list-style-type: none;
}

ul li a
{
display: block;
padding: 0 0 0 20px;
background: url(img/button.gif) no-repeat 0 100%;
}

ul li a span
{
display: block;
padding: 0 0 25px 0;
background: url(img/button.gif) no-repeat 100% 100%;
}

ul li a span span
{
padding: 0 20px 0 0;
background-position: 100% 0;
}

ul li a span span span
{
padding: 20px 0 0 20px;
margin-left: -20px;
background-position: 0 0;
}


Все padding'и и margin'ы, которые Вы видите в css используются для того чтобы задать отступы от всех 4-ех сторон кнопки. Кому лень разбираться — продемонстрирую такой картинкой, и нижеследующим кодом:

ul
{
margin: 0;
padding: 0;
}

ul li
{
margin: 0;
padding: 4px 0;
list-style-type: none;
}

ul li a
{
display: block;
padding: 0 0 0 20px;/* a */
background: url(img/button.gif) no-repeat 0 100%;
}

ul li a span
{
display: block;
padding: 0 0 25px 0;/* d */
background: url(img/button.gif) no-repeat 100% 100%;
}

ul li a span span
{
padding: 0 20px 0 0;/* c */
background-position: 100% 0;
}

ul li a span span span
{
padding: 20px 0 0 20px;/* b 0 0 a */
margin-left: -20px;/* a */
background-position: 0 0;
}


Таким образом имеем менюшку, пункты которой могут тянуться и по ширине, и по высоте — то есть пункт меню на несколько строк — не проблема.

В итоге: валидный код, 1 (!) картинка, кроссбраузерность, выполненная задача.
Тестил:
IE6-7, Firefox 2, Opera 9.5 on Windows
Safari 4 on Mac

P.S. На «мегасвежесть» идеи не претендую, просто решил поделиться с теми, кто мучается с решением подобных проблем.