Hola a todos ^^
Estoy intentando hacer un menú con la técnica de sprite, pero probablemente no he entendido muy bien cómo se hace (si alguien conoce un buen manual lo agradezco).
A ver, al imagen de fondo del menú sería algo así:
He marcado en rojo las partes en que se dividiría porque los menús no tienen tamaño fijo, entonces me interesa que se pueda expandir en vertical y horizontal sin perder la forma.
El código que estoy usando es:
En el html:
Código HTML:
<table class='menu1'>
<tr class='fila'>
<td class='si1'></td>
<td class='sc1'>".$caption."</td>
<td class='sd1'></td>
</tr>
<tr class='fila'>
<td class='ci1'></td>
<td class='cc1'>".$text."</td>
<td class='cd1'></td>
</tr>
<tr class='fila'>
<td class='ii1'></td>
<td class='ic1'></td>
<td class='id1'></td>
</tr>
</table>
En el CSS:
Código PHP:
.menu1
{
clear: none;
overflow: auto;
background:url(images/menu1/menu1.png);
}
.fila
{
clear: both;
}
.si1{width:16px; height:49px;}
.sc1{width:240px; height:49px; background-position:-16px 0px;}
.sd1{width:13px; height:49px; background-position:-256px 0px;}
.ci1{width:16px; height:104px; background-position:0px -49px;}
.cc1 {width:240px; height:104px; background-position:-16px -49px;}
.cd1{width:13px; height:104px; background-position:-256px -49px;}
.ii1 {width:16px; height:16px; background-position:0px -153px;}
.ic1{width:240px; height:16px; background-position:-16px -153px;}
.id1 {width:13px; height:16px; background-position:-256px -153px;}
El problema es que no hace puto caso del sprite, me pone la imagen entera de fondo y ya. Me estoy leyendo todo lo que encuentro de sprites, pero no me termino de enterar. Qué está mal?