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 < [email protected]> 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 <[email protected]> > > > > > Los links si que pueden albergar bloques poniendo el display:block; > > > > > > El 8 de septiembre de 2009 16:40, Alvarez Laurnaga, Jose Antonio < > > > > > > [email protected]> 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: [email protected] > > > > >> [mailto:[email protected]] 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 > > > > >> > > > > >> <[email protected]>escribió: > > > > >> > De nada > > > > >> > > > > > >> > 2009/9/8 Rafa Artacho <[email protected]> > > > > >> > > > > > >> > > Muchas gracias, se ve perfecto. > > > > >> > > > > > > >> > > 2009/9/8 Ignacio Ricci <[email protected]> > > > > >> > > > > > > >> > > > a.boton-wrapper:hover .boton {}a.boton-wrapper:hover > > > > >> > > > > >> .boton-izda > > > > >> > > > > >> > > > {} a.boton-wrapper:hover .boton-dcha {} > > > > >> > > > > > > > >> > > > 2009/9/8 Rafa Artacho <[email protected]> > > > > >> > > > > > > > >> > > > > 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 > > > > >> > > > > [email protected] 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 > > > > >> > > > [email protected] 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 > > > > >> > > > > >> [email protected] > > > > >> > > > > >> > > 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 > > > > >> > > > > >> [email protected] > > > > >> > > > > >> > 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 > > > > >> [email protected] 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 [email protected] > > > > 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 [email protected] > > > 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 [email protected] > > 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 [email protected] > 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 [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
