Re: [Ovillo] Dar efecto hover en botón en 3 imáge nes
No sólo es más complicado.
El enlace es un elemento en línea y no puede albergar elementos de bloque (divs)
El html de Rafa no validará
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org
[mailto:ovillo-boun...@lists.ovillo.org] En nombre de Andrés
gutiérrez
Enviado el: martes, 08 de septiembre de 2009 16:21
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo]Dar efecto hover en botón en 3 imágenes
Aunque es complicarse mucho para un boton, yo te propondría esto:
a href=http://www.google.com;
spangoogle/span
/a
a{display:block;background:url(path/a/tu/img-derecha.gif)
no-repeat top left;padding:0 10px 0 0;} a
span{display:block;background:url(path/a/tu/img-izquierda.gif
) no-repeat top left;padding:6px 10px 6px 0;}
a:hover{display:block;background:url(path/a/tu/img-derecha_over.gif)
no-repeat top left;padding:0 10px 0 0;}
a:hover
span{display:block;background:url(path/a/tu/img-izquierda_over.gif)
no-repeat top left;padding:6px 10px 6px 0;}
Como ves son 4 img 2 para estado normal y 2 para hover. El
HTML que se genera es más sencillo.
Tienes que tener en cuenta que las imagenes del span deben
de ser muy largas
(ej:250px) así puedes aplicar esto mismo a distintas
palabras y el botón se adapta.
Las imagenes del deben de ser en este caso de 10px de ancho
El 8 de septiembre de 2009 16:10, Ignacio Ricci
ignacio.ri...@gmail.comescribió:
De nada
2009/9/8 Rafa Artacho teme...@gmail.com
Muchas gracias, se ve perfecto.
2009/9/8 Ignacio Ricci ignacio.ri...@gmail.com
a.boton-wrapper:hover .boton {}a.boton-wrapper:hover
.boton-izda
{} a.boton-wrapper:hover .boton-dcha {}
2009/9/8 Rafa Artacho teme...@gmail.com
Buenas tardes:
Me gustaría saber si existe alguna técnica para que
teniendo un
botón compuesto por 3 imágenes (izquierda, medio y
derecha), se
pueda
aplicar
el
efecto hover al botón completo. Tal y como lo tengo ahora:
.boton-wrapper{
float:right;
margin-top:5px;
}
a.boton-wrapper {
text-decoration:none;
color:#FFF;
}
.boton{
background:#DC002E url(../img/pixel-medio.gif) repeat-x 0 0;
height:16px; float:left; width:auto; padding:5px 10px; }
.boton-izda{ background:#DC002E url(../img/izquierda.gif)
no-repeat 0 0; height:26px; width:4px; float:left; }
.boton-dcha{ background:#DC002E url(../img/derecha.gif)
no-repeat 0 0; height:26px; width:4px; float:left; }
.boton:hover{ background:#DC002E
url(../img/pixel_medioHover.gif) repeat-x 0 0; }
.boton-izda:hover{ background:#DC002E
url(../img/izquierdaHover.gif) no-repeat 0 0; }
.boton-dcha:hover{ background:#DC002E
url(../img/derechaHover.gif) no-repeat 0 0; }
a href=# class=boton-wrapper
div class=boton-izda/div
div class=botonEntrar/div
div class=boton-dcha/div
/a
El hover se aplica a cada uno de los divs de manera
individual,
cambiándose
de manera desigual el aspecto de botón.
Gracias
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org Puedes modificar tus datos o
desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
↓ Ignacio Ricci
www.ignacioricci.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org Puedes modificar tus datos o
desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la
siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
↓ Ignacio Ricci
www.ignacioricci.com
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente
dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
--
Experiencia es lo que obtienes, cuando no obtienes lo que quieres.
-
Caminar sobre el agua y desarrollar software a partir de
unas especificaciones es fácil. si ambas están congeladas.
Edward V. Berard, ingeniero informático.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a
Ovillo@lists.ovillo.org Puedes modificar tus
Re: [Ovillo] Dar efecto hover en botón en 3 imáge nes
El Tuesday 08 September 2009 16:49:36 Tamara Forza escribió:
como sabréis primero ha preguntado que como se hace tal cosa...
Ricci le ha dado la respuesta más perfecta, no es accesible porque un a tiene
que ser inline?, eso donde lo pone? el mismo ha dado la respuesta de ponerlo
en bloque y podría validar, poner span en vez de div no funcionaría ya que
los div se pegan al contenido, si a la class boton-izda le metes una imagen
de 50px X 50px no le puedes dar ni height ni width, por lo tanto sigo viendo
bien lo de Ricci, y si no pasa accesibilidad pues se cambiará la forma de
exponer el problema con otra solución.
Hola,
no escribo mucho a la lista aunque sigo todas la discusiones.
En mi opinión José Antonio tiene razón, lo que se debería hacer es lo
siguiente:
a href=# class=boton-wrapper
span class=boton-izda/span
span class=botonEntrar/span
span class=boton-dcha/span
/a
y definir para el span el display:block. Siempre que nos interese la
accesibilidad del sitio web.
Un saludo,
Tamara
2009/9/8 Andrés gutiérrez andresgut...@gmail.com
Los links si que pueden albergar bloques poniendo el display:block;
El 8 de septiembre de 2009 16:40, Alvarez Laurnaga, Jose Antonio
jalva...@softwareag.es escribió:
No sólo es más complicado.
El enlace es un elemento en línea y no puede albergar elementos de
bloque (divs)
El html de Rafa no validará
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org
[mailto:ovillo-boun...@lists.ovillo.org] En nombre de Andrés
gutiérrez
Enviado el: martes, 08 de septiembre de 2009 16:21
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo]Dar efecto hover en botón en 3 imágenes
Aunque es complicarse mucho para un boton, yo te propondría esto:
a href=http://www.google.com;
spangoogle/span
/a
a{display:block;background:url(path/a/tu/img-derecha.gif)
no-repeat top left;padding:0 10px 0 0;} a
span{display:block;background:url(path/a/tu/img-izquierda.gif
) no-repeat top left;padding:6px 10px 6px 0;}
a:hover{display:block;background:url(path/a/tu/img-derecha_over.gif)
no-repeat top left;padding:0 10px 0 0;}
a:hover
span{display:block;background:url(path/a/tu/img-izquierda_over.gif)
no-repeat top left;padding:6px 10px 6px 0;}
Como ves son 4 img 2 para estado normal y 2 para hover. El
HTML que se genera es más sencillo.
Tienes que tener en cuenta que las imagenes del span deben
de ser muy largas
(ej:250px) así puedes aplicar esto mismo a distintas
palabras y el botón se adapta.
Las imagenes del deben de ser en este caso de 10px de ancho
El 8 de septiembre de 2009 16:10, Ignacio Ricci
ignacio.ri...@gmail.comescribió:
De nada
2009/9/8 Rafa Artacho teme...@gmail.com
Muchas gracias, se ve perfecto.
2009/9/8 Ignacio Ricci ignacio.ri...@gmail.com
a.boton-wrapper:hover .boton {}a.boton-wrapper:hover
.boton-izda
{} a.boton-wrapper:hover .boton-dcha {}
2009/9/8 Rafa Artacho teme...@gmail.com
Buenas tardes:
Me gustaría saber si existe alguna técnica para que
teniendo un
botón compuesto por 3 imágenes (izquierda, medio y
derecha), se
pueda
aplicar
el
efecto hover al botón completo. Tal y como lo tengo ahora:
.boton-wrapper{
float:right;
margin-top:5px;
}
a.boton-wrapper {
text-decoration:none;
color:#FFF;
}
.boton{
background:#DC002E url(../img/pixel-medio.gif) repeat-x 0 0;
height:16px; float:left; width:auto; padding:5px 10px; }
.boton-izda{ background:#DC002E url(../img/izquierda.gif)
no-repeat 0 0; height:26px; width:4px; float:left; }
.boton-dcha{ background:#DC002E url(../img/derecha.gif)
no-repeat 0 0; height:26px; width:4px; float:left; }
.boton:hover{ background:#DC002E
url(../img/pixel_medioHover.gif) repeat-x 0 0; }
.boton-izda:hover{ background:#DC002E
url(../img/izquierdaHover.gif) no-repeat 0 0; }
.boton-dcha:hover{ background:#DC002E
url(../img/derechaHover.gif) no-repeat 0 0; }
a href=# class=boton-wrapper
div class=boton-izda/div
div class=botonEntrar/div
div class=boton-dcha/div
/a
El hover se aplica a cada uno de los divs de manera
individual,
cambiándose
de manera desigual el aspecto de botón.
Gracias
___
Lista
