Foros del Web » Creando para Internet » HTML »

Duda existencial sobre validación: ¿capa dentro de enlace?

Estas en el tema de Duda existencial sobre validación: ¿capa dentro de enlace? en el foro de HTML en Foros del Web. Hola, seguramente, esto estará escrito en alguna página, pero a través de Google no he conseguido encontrar información sobre mi caso. No es nada del ...
  #1 (permalink)  
Antiguo 05/10/2008, 13:36
Avatar de Artdeco  
Fecha de Ingreso: abril-2005
Ubicación: Barcelona
Mensajes: 165
Antigüedad: 12 años, 8 meses
Puntos: 1
Pregunta Duda existencial sobre validación: ¿capa dentro de enlace?

Hola,

seguramente, esto estará escrito en alguna página, pero a través de Google no he conseguido encontrar información sobre mi caso. No es nada del otro mundo, pero sí necesito algo muy concreto.

Resulta que estoy haciendo una especie de banner, diseñado en forma de imagen. Y que, cuando el ratón pase por encima, el hover transforme la imagen en otra. Y el banner, por supuesto, lo quiero enlazar a otro lugar.

Por cuestiones de accesibilidad, no quiero usar la opción de Javascript que me da Dreamweaver (usar la opción "imagen de sustitución") y poner el contenido de la imagen en un simple "alt". Prefiero hacerlo de forma que, si desnudo la página de css, el texto se lea.

Esto es, en versión reducida, lo que tengo:

Código HTML:
<html>
<head>
<style type="text/css">
<!--
div.banner {
	background-image:url(background.png);
	height:150px;width:500px;
}
div.banner:hover {
	background-image:url(background-hover.png);
}
div.banner h1,div.banner p {
	visibility:hidden;
	text-indent:-999999px;
}
-->
</style>
</head>
<body>
<a href="enlace.html">
<div class="banner">
  <h1>Título del banner</h1>
  <p>Contenido del texto</p>
</div>
</a>
</body>
</html> 
A ojos de los navegadores, funcionar, funciona. Ahí tengo el banner con un hover, y un texto dentro que está oculto, sólo se puede leer si se quita el css (pensado también para navegadores de voz).

Lo dicho, me he apañado como bien he podido, pero parece que el W3 me prohíbe que ponga un <div> dentro de un <a>.

¿Cómo podría hacer lo mismo de forma accesible, sin usar una imagen <img y que sea código válido?

Muchas gracias.
  #2 (permalink)  
Antiguo 05/10/2008, 19:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Duda existencial sobre validación: ¿capa dentro de enlace?

Hola, Artdeco.

Es simplemente que un elemento de bloque no debe ir dentro de un elemento de línea. Puedes reemplazar el div con un span, y en la css darle display block para que tenga el mismo comportamiento que un div.

Ojo, lo mismo con el resto de los elementos de bloque.
__________________
Visita mi nueva web idplus.org
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 21:49.