Layout: the implementation of "rubber" buttons

Practically on each site it is necessary to implement the menu. Usually there is no problem in this - we wrap everything in an unnumbered list - ul, prescribe all the necessary styles and is ready.
But very often designers, trying to create another mega-awesome layout, make any 3D buttons, or buttons with rounded edges and a bunch of gradients, or anything else awful :)

Speech in this topic will go about how to implement such a menu, taking into account the fact that the dimensions of each menu item are not fixed, that is, they can be dragged out.


So, we have some awesome button:

')
The task is to make this button a menu item, and so that it can stretch both horizontally and vertically. Usually this is done by cutting out 4 corners + 4 strips (lower, upper and two side, all repeated using the repeat property) - respectively, at least 8 (!) Elements are needed, respectively 8 pictures.

I suggest doing it differently. We will take into account the fact that this is a menu item and a paragraph of text in it cannot be (that is, the dimensions are limited).

To begin with, we have the usual menu implementation:




• 

• 

• 

• 

• 





Increase our button in size, taking into account the maximum size that it can take, for example like this:


In the HTML code, add a few spans:

• About company
• About life
• About life after death
• About death after life
• Fantasy is over

And here is the 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;
}


All paddings and margins that you see in css are used to set indents from all 4 sides of the button. To whom laziness to understand - I will show such picture, and the following code:

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;
}


Thus, we have a menu, the items of which can be dragged both in width and in height - that is, a menu item for several lines is not a problem.

The result: a valid code, 1 (!) Picture, cross-browser compatibility, completed task.
Test:
IE6-7, Firefox 2, Opera 9.5 on Windows
Safari 4 on Mac

PS I don’t pretend to “mega-freshness” ideas, I just decided to share it with those who suffer from solving such problems.