=?iso-8859-1?Q?Re:_=5BOvillo=5D_bot=F3n_CSS?=

Wed, 29 Sep 2004 09:23:45 -0700

Yo usaria solo 2 imagenes, asi ahorras marcado. Una puede ser enormemente grande y ocultar cierta parte.

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:

span class="botonDcha"
span class="botonIzda"
a href="#" class="botonFondo"
bot&oacute;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 



_______________________________________________
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

Responder a