Dudas sobre visibility:hidden.

[hey_alan]

Hola a todos.

He intentado hacer mi sitio lo más accesible posible, por lo que hice el siguiente código CSS para el menu lateral (Pueden ver el menú AQUI):

Código:

.menu{width:160px; height:60px; margin:auto; margin-bottom:8px;}
.menu a{width:160px; height:60px; display:block; border:0;}
.menu a img{visibility:hidden;}
#menu-portada{background:url(graficos/btn_portada2.gif);}
#menu-portada a{background:url(graficos/btn_portada1.gif);}
#menu-portada a:hover {background:none;}
#menu-nosotros{background:url(graficos/btn_nosotros2.gif);}
#menu-nosotros a{background:url(graficos/btn_nosotros1.gif);}
#menu-nosotros a:hover{background:none;}

//Etcétera...

Y el HTML:

Código:

<ul>
<li><div class="menu" id="menu-portada"><a href="index.php" accesskey="1"><img src="graficos/btn_portada1.gif" alt="Portada" border="0" /></a></div></li>
<li><div class="menu" id="menu-nosotros"><a href="nosotros.php" accesskey="2"><img src="graficos/btn_nosotros1.gif" alt="Nosotros" border="0"/></a></div></li>
</ul>

Como pueden ver, estoy ocultando la imagen con CSS utilizando "visibility:hidden;" para que no se muestre, pero poder utilizar el a:hover. De este modo, cuando se desactive CSS y no se puedan ver las capas, se mueste la imagén.

El problema se presenta cuando CSS está activado y las imagenes desactivadas, ya que (según mi teoria :P) poniendo "visiblility:hidden" también se oculta el texto alternativo.

¿Qué solución encuentran?

[floren]

Creo que entiendo lo que quieres hacer, pero no sé muy bien porqué has tirado por esa vía, es decir, mantener las imágenes cuando se desactiva CSS.

Yo personalmente haría algunos ajustes:

Código HTML:

<ul class="menu">
<li id="menu-portada"><a href="index.php" accesskey="1"><span>Portada</span></a></li>
</ul> 

(No he probado si sería así correcta la identificación de clases con respecto a tu CSS)


Y en el CSS

Código:

.menu span{
	display: none;
}

¿Qué consigo? Oculto el texto con CSS, pero en dispositivos móviles, navegadores de texto, etc, me lo muestra, con lo que la carga es mucho más rápida y accesible.

Espero te sirva,suerte.

[hey_alan]

Gracias n_n

Pero el problema sigue siendo el mismo: No "hay menú" cuando se desactivan las imágenes y CSS sigue activado.

Saludos.

[hey_alan]

Creo que he encontrado una solución, pero no sé si sea de lo más correcto.

Tengo el CSS de está manera:

Código:

menu{width:160px; height:60px; margin:auto; margin-bottom:8px; overflow:hidden;}
.menu a{width:160px; height:60px; display:block; border:0;}
#menu-portada{background:url(graficos/btn_portada2.gif);}
#menu-portada a{background:url(graficos/btn_portada1.gif);}
#menu-portada a:hover {background:none;}
#menu-nosotros{background:url(graficos/btn_nosotros2.gif);}
#menu-nosotros a{background:url(graficos/btn_nosotros1.gif);}
#menu-nosotros a:hover{background:none;}
//ETC

Y el HTML de esta otra:

Código:

<ul>
<li class="menu" id="menu-portada"><a href="index.php" accesskey="1"><img scr="menuitem" alt="Portada"></a></li>
<li class="menu" id="menu-nosotros" ><a href="nosotros.php" accesskey="2"><img scr="menuitem" alt="Nosotros"></a></li>
</ul>

La clave está en que la imagen "<img scr="menuitem" alt="Portada">" En realidad es un GIF Transparente, para que así cuando se deshabiliten las imágenes de cualquier manera muestra su texto alternativo.

¿Creen que exista algún inconveniento u otro método más correcto?