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="boton">Entrar</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";>
> > > > >>     <span>google</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.com>escribió:
> > > > >> > 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="boton">Entrar</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
> > > >
> > > > _______________________________________________
> > > > 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
>
>
> _______________________________________________
> 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

Responder a