Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
Según el w3c: "Generalmente, los elementos en bloque pueden contener elementos en línea y a otros elementos en bloque. Generalmente, los elementos en línea sólo pueden contener datos y a otros elementos en línea." No dice que no se puedan meter un elemento de bloque (un div por ejemplo) dentro de otro en línea (un enlace en este caso), pero por norma general no debería hacerse. Se puede usar perfectamente span con un display:block. Por otra parte darle display:block a un elemento en línea no lo convierte en un elemento de bloque, se comporta como tal pero sigue siendo un elemento en línea a egfectos de estructura del documento. ___ 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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
Creo que la que has puesto [1] , es la mia (que no es mía) pero con buttom-span-em. ¿Alguna más? O esperamos a css3, ie version ¿? y los borders redondeados y esas cosas bonitas que estan por venir :D [1] http://cssglobe.com/post/1367/creating-and-styling-resizable-buttons El 8 de septiembre de 2009 17:14, Ignacio Ricci escribió: > Creo que esta solucion esta bastante buena: > http://cssglobe.com/post/1367/creating-and-styling-resizable-buttons > > La use un tiempo. Ahora ya no, pero creo que sirve. > > 2009/9/8 Andrés gutiérrez > > > Por aprender yo...¿Cuál es la forma más correcta de abordar este > problema? > > > > > > El 8 de septiembre de 2009 17:09, Alvarez Laurnaga, Jose Antonio < > > jalva...@softwareag.es> escribió: > > > > > > > > >> Yo respondo la pregunta que hacen a la lista.Me parece > > > >> horrible la manera de hacer ese botón, pero bueno, no me > > > >> pongo en el rol de profesor. > > > >> La gente busca una respuesta concreta. > > > > > > Cierto, pero ¿no crees que también busca aprender? > > > Si estaba aplicando un enfoque erróneo y todavía está a tiempo de > > > reprogramar ese botón le estamos resolviendo el problema y encima habrá > > > aprendido una mejor forma de trabajar para futuros proyectos. > > > ___ > > > 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 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 datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
De las dos en "discordia" la tuya, Andrés. Aunque creo que en el código que has enviado hay algún error, seguramente por las prisas. Lo digo porque la estoy probando ¿eh? >> -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 17:12 >> Para: Ovillo, la lista de CSS en castellano >> Asunto: Re: [Ovillo]Dar efecto hover en botón en 3 imágenes >> >> Por aprender yo...¿Cuál es la forma más correcta de abordar >> este problema? >> >> >> El 8 de septiembre de 2009 17:09, Alvarez Laurnaga, Jose >> Antonio < jalva...@softwareag.es> escribió: >> >> > >> > >> Yo respondo la pregunta que hacen a la lista.Me parece >> horrible la >> > >> manera de hacer ese botón, pero bueno, no me pongo en el rol de >> > >> profesor. >> > >> La gente busca una respuesta concreta. >> > >> > Cierto, pero ¿no crees que también busca aprender? >> > Si estaba aplicando un enfoque erróneo y todavía está a tiempo de >> > reprogramar ese botón le estamos resolviendo el problema y encima >> > habrá aprendido una mejor forma de trabajar para futuros proyectos. >> > ___ >> > 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 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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
Creo que esta solucion esta bastante buena: http://cssglobe.com/post/1367/creating-and-styling-resizable-buttons La use un tiempo. Ahora ya no, pero creo que sirve. 2009/9/8 Andrés gutiérrez > Por aprender yo...¿Cuál es la forma más correcta de abordar este problema? > > > El 8 de septiembre de 2009 17:09, Alvarez Laurnaga, Jose Antonio < > jalva...@softwareag.es> escribió: > > > > > >> Yo respondo la pregunta que hacen a la lista.Me parece > > >> horrible la manera de hacer ese botón, pero bueno, no me > > >> pongo en el rol de profesor. > > >> La gente busca una respuesta concreta. > > > > Cierto, pero ¿no crees que también busca aprender? > > Si estaba aplicando un enfoque erróneo y todavía está a tiempo de > > reprogramar ese botón le estamos resolviendo el problema y encima habrá > > aprendido una mejor forma de trabajar para futuros proyectos. > > ___ > > 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 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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
No se, creo que depende del approach que uno tiene para con la lista. Yo estoy hace casi dos años acá, y el 90% de las preguntas son en busqueda de algo concreto y el otro 10% son preguntas de buenas pràcticas. 2009/9/8 Alvarez Laurnaga, Jose Antonio > > >> Yo respondo la pregunta que hacen a la lista.Me parece > >> horrible la manera de hacer ese botón, pero bueno, no me > >> pongo en el rol de profesor. > >> La gente busca una respuesta concreta. > > Cierto, pero ¿no crees que también busca aprender? > Si estaba aplicando un enfoque erróneo y todavía está a tiempo de > reprogramar ese botón le estamos resolviendo el problema y encima habrá > aprendido una mejor forma de trabajar para futuros proyectos. > ___ > 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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
Por aprender yo...¿Cuál es la forma más correcta de abordar este problema? El 8 de septiembre de 2009 17:09, Alvarez Laurnaga, Jose Antonio < jalva...@softwareag.es> escribió: > > >> Yo respondo la pregunta que hacen a la lista.Me parece > >> horrible la manera de hacer ese botón, pero bueno, no me > >> pongo en el rol de profesor. > >> La gente busca una respuesta concreta. > > Cierto, pero ¿no crees que también busca aprender? > Si estaba aplicando un enfoque erróneo y todavía está a tiempo de > reprogramar ese botón le estamos resolviendo el problema y encima habrá > aprendido una mejor forma de trabajar para futuros proyectos. > ___ > 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 datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
>> Yo respondo la pregunta que hacen a la lista.Me parece >> horrible la manera de hacer ese botón, pero bueno, no me >> pongo en el rol de profesor. >> La gente busca una respuesta concreta. Cierto, pero ¿no crees que también busca aprender? Si estaba aplicando un enfoque erróneo y todavía está a tiempo de reprogramar ese botón le estamos resolviendo el problema y encima habrá aprendido una mejor forma de trabajar para futuros proyectos. ___ 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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
No entiendo nada, creo que no he entendido la pregunta inicial. Se trata de
hacer un link con forma de botón o no?
Si es que si. creo que con un y un dentro sobra.
El 8 de septiembre de 2009 16:53, Nesta Guerrero Pancorbo <
nguerr...@emergya.es> escribió:
> 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:
> >
> >
> >
> >
> >Entrar
> >
> >
> >
> > 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
> >
> > > 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:
> > > > >>
> > > > >> http://www.google.com";>
> > > > >> google
> > > > >>
> > > > >>
> > > > >> 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
> > > > >>
> > > > >> escribió:
> > > > >> > De nada
> > > > >> >
> > > > >> > 2009/9/8 Rafa Artacho
> > > > >> >
> > > > >> > > Muchas gracias, se ve perfecto.
> > > > >> > >
> > > > >> > > 2009/9/8 Ignacio Ricci
> > > > >> > >
> > > > >> > > > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover
> > > > >>
> > > > >> .boton-izda
> > > > >>
> > > > >> > > > {} a.boton-wrapper:hover .boton-dcha {}
> > > > >> > > >
> > > > >> > > > 2009/9/8 Rafa Artacho
> > > > >> > > >
> > > > >> > > > > 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/dere
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
Yo respondo la pregunta que hacen a la lista.Me parece horrible la manera de
hacer ese botón, pero bueno, no me pongo en el rol de profesor.
La gente busca una respuesta concreta.
2009/9/8 Nesta Guerrero Pancorbo
> 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:
> >
> >
> >
> >
> >Entrar
> >
> >
> >
> > 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
> >
> > > 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:
> > > > >>
> > > > >> http://www.google.com";>
> > > > >> google
> > > > >>
> > > > >>
> > > > >> 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
> > > > >>
> > > > >> escribió:
> > > > >> > De nada
> > > > >> >
> > > > >> > 2009/9/8 Rafa Artacho
> > > > >> >
> > > > >> > > Muchas gracias, se ve perfecto.
> > > > >> > >
> > > > >> > > 2009/9/8 Ignacio Ricci
> > > > >> > >
> > > > >> > > > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover
> > > > >>
> > > > >> .boton-izda
> > > > >>
> > > > >> > > > {} a.boton-wrapper:hover .boton-dcha {}
> > > > >> > > >
> > > > >> > > > 2009/9/8 Rafa Artacho
> > > > >> > > >
> > > > >> > > > > 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; he
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
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:
Entrar
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
> 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:
> > >>
> > >> http://www.google.com";>
> > >> google
> > >>
> > >>
> > >> 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
> > >> escribió:
> > >>
> > >> > De nada
> > >> >
> > >> > 2009/9/8 Rafa Artacho
> > >> >
> > >> > > Muchas gracias, se ve perfecto.
> > >> > >
> > >> > > 2009/9/8 Ignacio Ricci
> > >> > >
> > >> > > > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover
> > >> .boton-izda
> > >> > > > {} a.boton-wrapper:hover .boton-dcha {}
> > >> > > >
> > >> > > > 2009/9/8 Rafa Artacho
> > >> > > >
> > >> > > > > 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; }
> > >> > > > >
> > >> > > > >
> > >> > > > >
> > >> > > > >
> > >> > > > >Entrar
> > >> > > > >
> > >> > > > >
> > >> > > > >
> > >> > > > > 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
> > >> > > >
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
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:
> >>
> >> http://www.google.com";>
> >> google
> >>
> >>
> >> 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
> >> escribió:
> >>
> >> > De nada
> >> >
> >> > 2009/9/8 Rafa Artacho
> >> >
> >> > > Muchas gracias, se ve perfecto.
> >> > >
> >> > > 2009/9/8 Ignacio Ricci
> >> > >
> >> > > > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover
> >> .boton-izda
> >> > > > {} a.boton-wrapper:hover .boton-dcha {}
> >> > > >
> >> > > > 2009/9/8 Rafa Artacho
> >> > > >
> >> > > > > 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; }
> >> > > > >
> >> > > > >
> >> > > > >
> >> > > > >
> >> > > > >Entrar
> >> > > > >
> >> > > > >
> >> > > > >
> >> > > > > 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
> >> > _
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
Perdon. La última linea quería decir que los deben de tener imagenes
(en este ejemplo) de 10px de ancho.
El 8 de septiembre de 2009 16:20, Andrés gutiérrez
escribió:
> Aunque es complicarse mucho para un boton, yo te propondría esto:
>
> http://www.google.com";>
> google
>
>
> 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
> escribió:
>
> De nada
>>
>> 2009/9/8 Rafa Artacho
>>
>> > Muchas gracias, se ve perfecto.
>> >
>> > 2009/9/8 Ignacio Ricci
>> >
>> > > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover .boton-izda {}
>> > > a.boton-wrapper:hover .boton-dcha {}
>> > >
>> > > 2009/9/8 Rafa Artacho
>> > >
>> > > > 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;
>> > > > }
>> > > >
>> > > >
>> > > >
>> > > >
>> > > >Entrar
>> > > >
>> > > >
>> > > >
>> > > > 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.
>
--
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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
Aunque es complicarse mucho para un boton, yo te propondría esto:
http://www.google.com";>
google
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
escribió:
> De nada
>
> 2009/9/8 Rafa Artacho
>
> > Muchas gracias, se ve perfecto.
> >
> > 2009/9/8 Ignacio Ricci
> >
> > > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover .boton-izda {}
> > > a.boton-wrapper:hover .boton-dcha {}
> > >
> > > 2009/9/8 Rafa Artacho
> > >
> > > > 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;
> > > > }
> > > >
> > > >
> > > >
> > > >
> > > >Entrar
> > > >
> > > >
> > > >
> > > > 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 datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
De nada
2009/9/8 Rafa Artacho
> Muchas gracias, se ve perfecto.
>
> 2009/9/8 Ignacio Ricci
>
> > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover .boton-izda {}
> > a.boton-wrapper:hover .boton-dcha {}
> >
> > 2009/9/8 Rafa Artacho
> >
> > > 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;
> > > }
> > >
> > >
> > >
> > >
> > >Entrar
> > >
> > >
> > >
> > > 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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
Muchas gracias, se ve perfecto.
2009/9/8 Ignacio Ricci
> a.boton-wrapper:hover .boton {}a.boton-wrapper:hover .boton-izda {}
> a.boton-wrapper:hover .boton-dcha {}
>
> 2009/9/8 Rafa Artacho
>
> > 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;
> > }
> >
> >
> >
> >
> >Entrar
> >
> >
> >
> > 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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
a.boton-wrapper:hover .boton {}a.boton-wrapper:hover .boton-izda {}
a.boton-wrapper:hover .boton-dcha {}
2009/9/8 Rafa Artacho
> 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;
> }
>
>
>
>
>Entrar
>
>
>
> 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
[Ovillo] Dar efecto hover en botón en 3 imágen es
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;
}
Entrar
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
