Necesito ayuda con un sprite css.

[ldp]

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?

[alexk]

.si1
.sc1
.sd1
.ci1
.cc1
.cd1
.ii1
.ic1
.id1

le declaras la posicion pero no el fondo XD
te recomiendo usar una "lista desordenada para el menu" ul > li... y no tablas que no es para eso...

[ldp]

Una pregunta sobre el css sprite, porque si no se puede es inútil lo que estoy haciendo. Para el fondo central quiero user un trozo de la imagen 5x5px y que se repita en todo el fondo, es posible hacerlo?

[Inluzion]

Si, claro que es posible, inténtalo sin tablas y cuelga el código si algo no funciona para que te ayudemos.

[ldp]

Por qué aconsejas hacerlo sin tablas? No tengo ni idea de cómo hacerlo sin tablas...

Además, el problema es que el menú no es fijo, sino que se tiene que adaptar a los que haya dentro. Esto las tablas lo hacen muy bien. Sin tablas crees que se adaptará igual?

[jomaruro]

Hola:

No entiendo nada, por un lado planteas tu duda así:

Necesito ayuda con un sprite css.

y por otro lado

Iniciado por ldp

No tengo ni idea de cómo hacerlo sin tablas...

Mejor date una vuelta por las FAQ's de CSS, encontrarás diferentes formas de hacer un menú sin tablas.

Saludos.

[ldp]

El sprite con tablas se ve relativamente bien, no se puede hacer un sprite con tablas?

El único problema que tengo ahora mismo es que quiero que el fondo del centro sea un trozo de la imagen que se repite, se puede hacer?

[alexk]

la unica manera de quedarte sin dudas es que tu mismo intentes resolverlas...
sabes crear una tabla? si
sabes ponerle fondo con css y posiciones? si
entonces que te detiene?... es eso todo el maravilloso mundo del sprite
(se puede con tablas pero en este caso para un menu :S)

y aun entiendo bien, si ya todo esta escrito... en las Faqs como bien te indican... solo hay que buscar y tener pasiencia... y si te atoras te ayudamos chao y suerte!

[kseso?]

Iniciado por ldp

Una pregunta sobre el css sprite, porque si no se puede es inútil lo que estoy haciendo. Para el fondo central quiero user un trozo de la imagen 5x5px y que se repita en todo el fondo, es posible hacerlo?

Iniciado por ldp

El único problema que tengo ahora mismo es que quiero que el fondo del centro sea un trozo de la imagen que se repite, se puede hacer?

No, no se puede.
Creo que tendrás que repasar y adquirir la idea de la técnica del "sprite".
Resumiendo y sin entrar en detalle:
Lo que se hace con un sprite es mostrar una parte muy concreta del archivo en un elemento dado (elemento ha de ser de tamaño sensíblemente igual al trozo de imagen que quieres mostrar).
El repeat utilizado en un fondo repite toda la imagen (el archivo) el número de veces necesarias para cubrir toda la superficie.
Y sin entrar en las "nuevas" propiedades/valores de css3 para background, esta repetición se hace tomando la esquina superior izquierda como punto de origen para insertar el archivo.

Mira a ver si aquí encuentras algo más de información sobre sprite + css

Un saludo

[ldp]

Gracias, eso es lo que quería saber, si no se puede hacer eso de repetir un trozo de imagen, pues no me sirve de nada el sprite.

Me he leído todo lo que he encontrado de css sprite, pero en ningún sitio ponía si se podía o no hacer eso. Vi que era para hacer menú "simples", pero pensé que también se podía hacer algo un poco más complicado.

Bueno, usaré el sprite sólo para el menú simple de navegación. Gracias por todo ^^

[kseso?]

Iniciado por ldp

Vi que era para hacer menú "simples", pero pensé que también se podía hacer algo un poco más complicado.

Bueno, usaré el sprite sólo para el menú simple de navegación. Gracias por todo ^^

Todo depende de lo que entiendas por "simple".
Con los sprites ocurre como con todo, hay que conocer su potencial y sus limitaciones y utilizar cada recurso en aquellas situaciones que mejor podamos aprovecharlo.
Recuerda que unas razones (hay más) de los sprites es ahorrar peticiones al servidor (tráfico) y evitar retrasos en la alternancias de imágenes una vez que la página está cargada.
Mira un ejemplo de algo simple pero vistoso utilizando sprites.

Un saludo y suerte

[ldp]

kseso? lo que quiero hacer es el fondo de un menú, pero la imagen no es fija ya que tiene que adaptarse tanto vertical como horizontal a lo que contiene.

Esto lo he hecho siempre con una tabla con 3 columnas y 3 filas. De manera que meto las imágenes en este orden:

esquina superior izquierda - centro que se repite en horizontal - esquina superior derecha
lateral izquierdo que se repite en vertical - fondo del centro - lateral derecho que se repite en vertical
esquina inferior izquierda - centro que se repite en horizontal - esquina inferior derecha

El problema es que la web tiene varios menús distintos por lo que termino con más de 60 pequeñas imágenes, por eso pensaba que era mejor hacerlos con sprites. Me podrías decir si es factible? O me recomiendas seguir haciéndolo con tablas?

[kseso?]

Si trabajas con css y todas las etiquetas (tag's) que (x)html pone a tu disposición no puedes pensar "tableadamente". Estás renunciando a mucho.

Hace un tiempo un usuario tenía una cuestión parecida a la tuya. Un menú que en función del momento tuviese más o menos elementos. La diferencia estaba en que la anchura era fija.
Este es el ejemplo ya pasado a una lista (ul/li/a). A el le sirvió de guía para el siguiente paso: caja que también variaba en anchura.
A ver si a ti te ayuda.
Si quieres algo más preciso a tu caso, pon un enlace a tu tabla y lo que ya tienes realizado con css.

Un saludo

[ldp]

Gracias como siempre, he considerado el mantener fijo el ancho, que en realidad debería mantenerse fijo, y con eso ya me ahorro 6 imágenes.

En el ejemplo que me das aconsejarías el sprite css?

En mi mente pensaba que para hacer el sprite tendría una imagen fija, imagínate que en el ejemplo que has puesto tuvieras sólo una imagen y usar cada trozo. Pero leyendo tutos he visto que las imágenes deben estar separadas por espacios (dentro de la misma imagen) para que navegadores como opera puedan interpretarla correctamente.

Así que al final terminas teniendo una imagen con casi el doble de peso que tendrían las 3 imágenes por separado, y no creo que merezca la pena.

[furoya]

No está nada mal experimentar (y pensar) para conocer los límites de un método. Y a estas alturas ya descubriste varios del sprite tú sólo, ldp. Igual te dejo un enlace

Sprites css

Lo de estirar los fondos se puede con javascript, pero es más que nada una curiosidad

como hacer un fondo ajustable?

Creo que webkit ya implementó un método para 'recortar' una imagen y ponerla de fondo como un borde y relleno. Lo vi como de pasada y no estoy seguro de haber entendido bien. El mecanismo sería el típico que se hace 'a mano', pero esta vez con CSS : a la imagen se la corta en 9 partes (NO, N, NE, O, SO, S, SE, E y centro), las de alrededor se ubican —justamente— alrededor de la capa y la del centro va como fondo. Si alguien tiene un Chrome o Safari y ya lo probó nos puede poner alguna descripción.

Por otro lado, lamento decir que si no se puede controlar el tamaño del contenido (y generalmente es así), el mejor método es usar una tabla previendo que a los "lados" se pueda repetir el fondo como vertical u horizontal (dependiendo si son de los costados o son los superior-inferior) y al fondo del cuerpo también se repite, pero como mosaico. Las esquinas quedan igual.
Hay varios otros ejemplos por aquí

una imagen ponerla de borde en una tabla

tabla bordes redondeados + imagen II

Preguntas Frecuentes (FAQ)

las esquinas de mikmoro

[ldp]

Me lo temía. Lo de los sprites empieza a parecerme una cosa lejana... Creo que en mi caso será más útil y fácil una tabla de toda la vida. Sí estoy pensando en usarlo para iluminar los textos de los menús y cosas por el estilo.