Función a:focus de CSS no funciona

sergiodvera · #1 (**permalink**) 14/02/2011, 13:55

Hola, soy nuevo en el foro y quisiera saber si alguien sabe como solucionar esto: tengo un menú en html el cual está enlazado a una hoja de estilo. La función a:focus para que el link me quede "activado" permanente mientras estoy en esa categoría no me funciona. La página está online y es http://www.americadelsur.edu.ar
Gracias.
Saludos.

Este es el código de la hoja de estilo:

@charset "charset=iso-8859-1";
/* CSS Document */

#menuv {
width: 227px;
font: 80% Arial, Helvetica, sans-serif;
font-weight:bold;
}
#menuv ul, li {
list-style-type: none;
}

#menuv ul {
margin: 0;
padding: 0;
}

#menuv a {
text-decoration: none;
text-indent: 12px;
line-height: 30px;
color: #000000;
background-image:url(imagenes_botones/img_menu_vertical.jpg);
display: block;
width: 227px;
height: 29px;
}

#menuv a:hover {
background-image:url(imagenes_botones/img_menu_vertical_2.jpg);
}

#menuv a:focus {
background-image:url(imagenes_botones/img_menu_vertical_2.jpg);
}

#2 (**permalink**) 14/02/2011, 14:17

te falta el a:visited

sanxuan · #3 (**permalink**) 14/02/2011, 14:47

He intentado validar el código de los dos archivos siguientes en http://validator.w3.org:
http://www.americadelsur.edu.ar/menu.html
http://www.americadelsur.edu.ar/menu.html
Ninguno de los dos está exento de errores.
Si el código no es válido no hay garantías de que se muestre correctamente.
En todo caso, no puedo afirmar que esa sea la causa del problema. Deberías corregir los errores y probar de nuevo.

kseso? · #4 (**permalink**) 14/02/2011, 16:30

1º: debería respetar el orden de declaración de las pseudoclases para evitarse problemas. Es un tema reiterativo. Recuerde, o busque más info, la regla mnemotécnica:
love and hate

2º: Quizás está confundiendo conceptos.
:focus es para cuando un elemento recibe el foco de la herramienta de selección. No digo puntero del ratón porque también admite el uso del teclado.

3º: junto a :focus debería definir :visited :active

4º: Todas las propiedades definidas mediante las pseudoclases clásicas (css 2.1) de los enlaces no son persistentes.

¿Quizás busca que la pestaña permanezca diferente cuando pasa de una página a otra (documento html)?

sergiodvera · #5 (**permalink**) 14/02/2011, 16:32

Gracias Sanxjuan, me saltee por completo ese paso, es mi primera web en html y me queda mucho por investigar. Corregí la mayoría de los errores (algunas cosas no las comprendo ya que el Dreamweaver 5 te las tira por defecto al incluir un swf, sin embargo "validator" las tira como error). El a:focus desaparecido continúa al acecho.

Davidbrepe, gracias por tu respuesta, creía que a:visited era para marcarte las categorías ya visitadas y no la presente. De todos modos probé en incluirlo pero resultó como lo había pensado: me deja marcado todo lo visitado. No es la función de a:focus.

Saludos.

sanxuan · #6 (**permalink**) 14/02/2011, 17:02

Si colocas tu código HTML y CSS te podremos ayudar a localizar el problema. Mejor aún si tienes la página subida a internet y colocas un enlace.
Yo acabo de hacer algunas pruebas con IE8 y se ve perfectamente un enlace con :focus. Funciona tanto con el tabulador como seleccionando con el puntero.
Firefox sólo me deja seleccionar el enlace con el puntero aunque también muestra el :focus.

sergiodvera · #7 (**permalink**) 14/02/2011, 18:53

Este es el código del archivo menu.html (el que verificaste con errores en www.americadelsur.edu.ar/menu.html Es un menú que va incrustado en el index.html, es exactamente el mismo criterio que otro menú horizontal que surge en la categoría "quienes somos". El menú vertical es un html con una hoja de estilo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css" >
#bot1 a{
float:left;
background-image:url(imagenes_botones/bg_menu_inicio_1.jpg);
height:34px;
width:84px;
color:#000000;
text-decoration: none;
text-align:center;
}
#bot1 a:hover{
float:left;
background-image:url(imagenes_botones/bg_menu_inicio_2.jpg);
color:#FFFFFF;
text-decoration: none;
}
#bot1 a:focus{
float:left;
background-image:url(imagenes_botones/bg_menu_inicio_2.jpg);
color:#FFFFFF;
text-decoration: none;
}

#bot2 a{
float:left;
background-image:url(imagenes_botones/bg_menu_quienes_1.jpg);
height:34px;
width:141px;
color:#000000;
text-decoration: none;
text-align:center;
}
#bot2 a:hover{
float:left;
background-image:url(imagenes_botones/bg_menu_quienes_2.jpg);
color:#FFFFFF;
text-decoration: none;
}
#bot2 a:focus{
float:left;
background-image:url(imagenes_botones/bg_menu_quienes_2.jpg);
color:#FFFFFF;
text-decoration: none;
}

#bot3 a{
float:left;
background-image:url(imagenes_botones/bg_menu_proyectos_1.jpg);
height:34px;
width:191px;
color:#000000;
text-decoration: none;
text-align:center;
}
#bot3 a:hover{
float:left;
background-image:url(imagenes_botones/bg_menu_proyectos_2.jpg);
color:#FFFFFF;
text-decoration: none;
}
#bot3 a:focus{
float:left;
background-image:url(imagenes_botones/bg_menu_proyectos_2.jpg);
color:#FFFFFF;
text-decoration: none;
}

#bot4 a{
float:left;
background-image:url(imagenes_botones/bg_menu_novedades_1.jpg);
height:34px;
width:107px;
color:#000000;
text-decoration: none;
text-align:center;
}
#bot4 a:hover{
float:left;
background-image:url(imagenes_botones/bg_menu_novedades_2.jpg);
color:#FFFFFF;
text-decoration: none;
}
#bot4 a:focus{
float:left;
background-image:url(imagenes_botones/bg_menu_novedades_2.jpg);
color:#FFFFFF;
text-decoration: none;
}

#bot5 a{
float:left;
background-image:url(imagenes_botones/bg_menu_contacto_1.jpg);
height:34px;
width:92px;
background-position: center top;
color:#000000;
text-decoration: none;
text-align:center;
}
#bot5 a:hover{
float:left;
background-image:url(imagenes_botones/bg_menu_contacto_2.jpg);
color:#FFFFFF;
text-decoration: none;
}
#bot5 a:focus{
float:left;
background-image:url(imagenes_botones/bg_menu_contacto_2.jpg);
color:#FFFFFF;
text-decoration: none;
}
.style2 {
font-size: 12px;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>

<body style=" border:0;margin:0;overflow:visible">

<a href="http://www.americadelsur.edu.ar/index.html" target="_parent">Inicio</a>

<a href="http://www.americadelsur.edu.ar/quienes_somos_instituto.html" target="_parent">Quiénes Somos</a>

<a href="http://www.americadelsur.edu.ar/proyectos.html" target="_parent">Proyectos Institucionales</a>

<a href="http://www.americadelsur.edu.ar/novedades.html" target="_parent">Novedades</a>

<a href="http://www.americadelsur.edu.ar/contacto.html" target="_parent">Contacto</a>
</body></html>

sergiodvera · #8 (**permalink**) 14/02/2011, 18:57

Me falto decir que uso IE8, también tengo una Mac con Safari y sucede lo mismo, no veo el :focus

sanxuan · #9 (**permalink**) 14/02/2011, 19:48

Perdona, pero no mi di cuenta de que habías incluido el enlace al principio, me cogiste en un despiste.
Te pongo el CSS para el primer botón. El resto se harían igual.

Código CSS:

Ver original#bot1 a{
    float:left;
    height:34px;
    width:84px;
    text-align:center;
    text-decoration: none;
}
#bot1 a:link, #bot1 a:visited {
    background-image:url(imagenes_botones/bg_menu_inicio_1.jpg);
    color:#000000;
}
#bot1 a:hover{
    background-image:url(imagenes_botones/bg_menu_inicio_2.jpg);
    color:#FFFFFF;
}
#bot1:active{
    /* Si quieres cambiar alguna propiedad al hacer click en el botón debería ir aquí */
}
#bot1 a:focus{
    background-image:url(imagenes_botones/bg_menu_inicio_2.jpg);
    color:#FFFFFF;
}

Pruébalo, creo que funciona bien según está. Es importante mantener el mismo orden en las declaraciones.

sergiodvera · #10 (**permalink**) 15/02/2011, 06:58

Mil gracias Sanxuan, he puesto tu código... sin embargo, lo veo igual, ni noticias del :focus... ¿cómo puede ser que tú lo veas en el mismo IE8 y yo no? de hecho, ayer instalé el Firefox ya que he leído que el IE siempre experimenta problemas... no solo NO lo veo al :focus, sino que el diseño del menú vertical no se ve, aparece un listado de los links en azul con underline.
Te agradezco nuevamente. Saludos.

sanxuan · #11 (**permalink**) 15/02/2011, 07:33

Se me coló una errata en el CSS. Donde ponía #bot1:active debería decir #bot1 a:active.
Por otro lado en las reglas #bot2 a:link, #bot1 a:visited debes cambiar el número para cada botón. Aquí debería ser: #bot2 a:link, #bot2 a:visited .
El problema con el menú vertical parece que tiene que ver con el CSS de estilo_menu_vertical.css. Puede que no hayas guardadado el archivo con el formato que declaras. Al borrarle la definición del tipo de texto (@charset "charset=iso-8859-1";) o cambiarla por @charset "utf-8"; aparece la imagen en firefox.

sergiodvera · #12 (**permalink**) 15/02/2011, 11:59

Hice los cambios, la verdad es que en lugar de hacer copy/paste como una oveja del rebaño, yo debería haber prestado un poco más de atención.

Ahora en Firefox se vé bien, lo que me sucede (no sé si a tí lo mismo) es que en el Index se ve todo ok, en cuanto hago click en cualquier categoría del menú horizontal superior, automáticamente me aparece un "borde" a la izquierda y arriba de punta a punta, me fijé en los parametros de frameboeder y todo lo relacionado y están en "0".

a:focus, creo que viene la navidad de 2011...

sanxuan · #13 (**permalink**) 15/02/2011, 12:29

Debes añadir en el archivo estilo_quienes_somos_instituto.css lo siguiente:

iframe {
border: none;
}

sergiodvera · #14 (**permalink**) 15/02/2011, 14:38

Gracias por el aporte!!
Ahora en Firefox se ve bien sin bordes. (de paso corregí todos los html que tenía mal de "0px" a "0").

El misterio para mi es el de siempre ¿puede ser que no funcione el :focus? ¿es normal que suceda eso? ¿porqué no lo veo en ningún navegador si el código es correcto?

sanxuan · #15 (**permalink**) 15/02/2011, 17:39

Yo insisto en que se ve bien en mi ordenador. Tanto en IE8 como en Firefox. Lo que es cierto es que tarda bastante en cargar las imágenes de fondo de cada botón.
Puedes mejorar el menu eliminando las imágenes de fondo de :hover y :focus sustituyéndolas por un color de fondo con background-color. Como la imagen es un fondo de color plano no hay diferencia.
Seguramente que el problema desaparece cuando haces focus en todos los enlaces del menu.
Usa la tecla de tabulación. Una vez que hayas pasado por todos los botones, cuando vuelvas a hacer foco sobre ellos deberían aparecer más rápido. Esto es debido a que en lugar de descargar las imágenes desde el servidor como en la primera vuelta, en la segunda ya se encuentran en la memoria del navegador.
Si necesitases en otra ocasión usar dos imágenes, se puede utilizar la técnica de "sprites". Se trata a grandes rasgos de "pegar" en una sola imagen los dos fondos (o más) y usar la posición del fondo para seleccionar la parte adecuada con background-position.
Ya te digo que no es tu caso, y cambiar la imagen de fondo para el foco y para el estado "hover" de los botones mejorará el tiempo de respuesta.
Para evitar problemas usa en todos los botones la propiedad background donde estás usando background-image. Para los enlaces con link y visited deja la imagen según está. Para los enlaces con :focus o :hover sustituye url(...imagen...) por el color azul de la imagen.

sergiodvera · #16 (**permalink**) 16/02/2011, 07:55

Lo que me dices de utilizar background-color en lugar de background-image para las funciones hover y focus, lo había hecho ya que me parecía lógico, es más, si te fijas en el menú de la categoría "quienes somos" está hecho de ese modo. Lo cierto es que cuando lo probé para visualizarlo, no veo el fonfo azul, sólo me cambia la tipografía a blanco y me deja el fondo original que tiene en estado a:link
En este momento realicé nuevamente el cambio, y no veo el fondo azul al hacer hover, simplemente me cambia de color el texto.
Seguramente tengo un problema de configuración en mis navegadores IE8 y Firefox, porque no puede ser que tú veas las funciones bien y yo no.

sanxuan · #17 (**permalink**) 16/02/2011, 08:29

Esto va camino de ser una novela por entregas.
Estás usando la propiedad background-color para definir el color de fondo en lugar de la propiedad background que yo te indiqué.
El resultado no puede ser el mismo.
Si vas a encargarte de mantener esta página te recomiendo que te descargues el complemento Firebug de Firefox si no lo usas todavía. Te permitirá localizar los errores y realizar pruebas con distintas propiedades CSS para cambiar la apariencia. Seleccionando un elemento de la página puedes ver todas las reglas que utiliza y qué propiedades de las que declaras pueden estar dejando de ser usadas al interferir reglas de otros elementos.
Las herramientas de desarrollador de IE realizan un trabajo parecido.

sergiodvera · #18 (**permalink**) 16/02/2011, 08:53

[QUOTE=...Puedes mejorar el menu eliminando las imágenes de fondo de :hover y :focus sustituyéndolas por un color de fondo con background-color. Como la imagen es un fondo de color plano no hay diferencia...[/QUOTE]

Creí que había que ponerlo así, disculpa si no te entendí. Ahora probé con background solo y funciona ok.

sanxuan · #19 (**permalink**) 16/02/2011, 12:40

Me alegro que se haya solucionado. Por lo visto indico una cosa y a continuación otra a renglón siguiente.
Un saludo.