Foros del Web » Creando para Internet » CSS »

Dudas sobre visibility:hidden.

Estas en el tema de Dudas sobre visibility:hidden. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/12/2007, 13:08
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Dudas sobre visibility:hidden.

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?
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #2 (permalink)  
Antiguo 30/12/2007, 00:30
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Dudas sobre visibility:hidden.

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.
  #3 (permalink)  
Antiguo 31/12/2007, 13:30
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Re: Dudas sobre visibility:hidden.

Gracias n_n

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

Saludos.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #4 (permalink)  
Antiguo 01/01/2008, 14:05
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Re: Dudas sobre visibility:hidden.

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?
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:18.