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
