Juan Manuel 30 de julio de 2008 a las 14.04
   Imprimir artículo
elWebmaster.com

Eliminando la molesta línea punteada de los enlaces de tu sitio


Eliminando la molesta l√≠nea punteada de los enlaces de tu sitioLos links del tipo “ancla” <a> muestran por defecto una l√≠nea punteada cuando est√°n activos o “en foco”. En Firefox 3 la l√≠nea toma el color del texto mientras que en otros navegadores o versiones directamente se muestra en color gris.

Esto no es una locura, por cuestiones de accesibilidad se muestra qu√© link est√° activo (piensa en personas que no puedan acceder a un sitio con una computadora con mouse. Presionando”tab” se desplazar√°n por los enlaces. Pero si te molesta ver esa l√≠nea en tu sitio por cuesti√≥n de est√©tica o dise√Īo, puedes seguir leyendo para enterarte c√≥mo eliminarla.

Aquí puedes ver un ejemplo de cómo se ve la línea punteada de la que te hablo.

Eliminando la molesta línea punteada de los enlaces de tu sitio

Prueba hacer clic en un enlace cualquiera, aqu√≠ mismo, pero deja el bot√≥n del mouse presionado unos segundos. Podr√°s ver la l√≠nea “en vivo y en directo”.

Quitarla por medio de CSS es muy sencillo:

  1. a {
  2. outline: none;
  3. }

Pero no te olvides de la accesibilidad. Deber√≠as crear un estilo para reemplazar esa l√≠nea molesta. Yo suelo usar el mismo que en “hover”.

Por ejemplo:

  1. a:hover, a:active, a:focus {
  2. // estilos para cualquier forma en la que se vaya a usar el link
  3. }

¡Anímate a personalizar tu blog!

Fuente: CSS Tricks


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (6)

  1. oliverastro dice:

    para no perder accesibilidad tambien puedes dejarlo asi:

    a {
    outline: 0;
    }

    Saludos

  2. Alejandro dice:

    ok, a ver si despues de tanto tiempo de este post recibo una respuesta… ¬Ņcomo hago para quitar esas lineas punteadas pero queme aparecen en un SWF? porque prob√© esto y no me funicon√≥…
    abrazo.

  3. Alejandra dice:

    Hola Alejandro. Mira, justamente en Flash no tienes el problema del recuadro punteado. Si tu sitio está enteramente hecho en Flash no deberías tener ese inconveniente. Sí puedes tener este problema si tienes un sitio web en HTML que tiene elementos de Flash. En ese caso la solución es la misma: editar el CSS y agregarle el código que aparece en esta nota. ¡Saludos!

  4. Jose dice:

    Hola.
    Necesito solucionar este problema y no me funciona la solución propuesta

  5. txema dice:

    Muchas gracias por el consejo. Me ha sokucionado un menu tipo acordeón vertical con fondo blanco que tenía que poner en un proyecto.

  6. diego cuomo dice:

    muchas gracias! me sirvio!!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder