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:
>span class="botonDcha"
>span class="botonIzda"
>a href="#" class="botonFondo"
botón muy muy largo
>/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
