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
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
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: 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
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: 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 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
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 nguerr...@emergya.es 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
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 a y un span 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: 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
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
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
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 jalva...@softwareag.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 -- ↓ 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
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
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 andresgut...@gmail.com 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
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 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
Perdon. La última linea quería decir que los a/a deben de tener imagenes (en este ejemplo) de 10px de ancho. El 8 de septiembre de 2009 16:20, Andrés gutiérrez andresgut...@gmail.comescribió: 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. -- 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
Re: [Ovillo] Dar efecto hover en botón en 3 imágen es
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
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 ignacio.ri...@gmail.comescribió: 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 andresgut...@gmail.com 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