Hecha un vistazo a esto: http://www.alistapart.com/articles/slidingdoors/
un saludo
Joseba Alonso
www.sidedev.net
www.5dms.com
----- Original Message ----- From: "Jose Antonio Alvarez Laurnaga" <[EMAIL PROTECTED]>
To: "'Ovillo, la lista de CSS en castellano'" <[EMAIL PROTECTED]>
Sent: Wednesday, September 29, 2004 1:29 PM
Subject: [Ovillo] botón CSS
Hola, necesito consejo para la creación de un botón que utilice elementos gráficos y se base en CSS y DIV/SPAN/P o lo que sea necesario. Lo que pretendo es lo que antes hacíamos con una tabla de tres celdas y una fila.
Lo detallo un poco por si alguién no lo conoce y le interesa: en la primera celda poníamos una imagen con la curva izquierda del botón (le dábamos una anchura fija igual al ancho de la imagen), en la tercera celda poníamos la imagen con la curva derecha del botón (también le dábamos una anchura fija igual al ancho de la imagen) y en la del centro iba el enlace con un background que se repetía en horizontal hasta llenar toda la celda pintando el cuerpo del botón.
Bien, he intentado hacer lo mismo con SPAN (tras darle muchas vueltas) de la siguiente manera (no se si utilizo la forma adecuada de poner código en los mensajes de la lista):
CSS:
.botonFondo {
height: 24px;
padding: 9px;
margin: 0;
background: url(img/botonesFondo.gif) repeat-x 0px 4px;
text-decoration: none;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #003399;
white-space: nowrap
}
.botonIzda {
background: url(img/botonesIzda.gif) no-repeat left center;
width: 4px;
height: 24px;
margin: 0;
padding: 4px;
}
.botonDcha {
background: url(img/botonesDcha.gif) no-repeat right center;
width: auto;
height: 24px;
margin: 0;
padding: 4px 0;
}
HTML:
botón muy muy largospan class="botonDcha" span class="botonIzda" a href="#" class="botonFondo"
/a /span /span
Lógicamente la idea es que el botón no tenga ninguna anchura especificada, de manera que funcione casi con cualquier texto sea largo o corto y que se expanda la zona central según sea necesario.
¿Qué os parece? ¿se puede mejorar (seguramente)? De momento funciona, aunque la zona central por la posición que le aplico a la imagen de fondo queda bien en IE5 y mal en Mozilla (o viceversa), en Opera falla el lado derecho. Decidme como se ve en IE. ¡Me estoy volviendo loco por un botón...!
Jose A. Alvarez Laurnaga Consultor CX-Met XML INDUSTRY SOLUTIONS Tel.: 91 80 79 684 / Ext.: 684 [EMAIL PROTECTED]
_______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [EMAIL PROTECTED] Puedes modificar tus tados o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [EMAIL PROTECTED]
Puedes modificar tus tados o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
_______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [EMAIL PROTECTED] Puedes modificar tus tados o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo_ovillo.org
