Cómo vincular una cabecera de una manera compatible con los estándares?
Pregunta
Tengo un bloque de HTML que se ve así:
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
Estoy usando una técnica de CSS para ocultar todo lo que el texto y reemplazarlo con una imagen. Pero quiero enlazar todo el bloque a la página principal. No puede envolver en <a>
porque eso no sería compatible con los estándares. Entonces, ¿cómo lo hago?
Mi solución; inspirado por Nuevo en la ciudad
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
<a href="index.html">Home</a>
</div>
#header {
text-indent: -9999px;
width: 384px;
height: 76px;
background: transparent url(../images/header.png) no-repeat;
margin: 10px;
position: relative;
}
#header a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Solución
Ponga un elemento de enlace exterior de los divs de cabecera y hacer que los cubre mediante el posicionamiento absoluto. También añadir un índice z para asegurarse de que el enlace recibe la entrada del usuario.
<style>
a.header
{
position: absolute;
display: block;
width: 100%;
height: 100px;
z-index: 1;
}
</style>
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
<a href="homepage" class="header"></a>
Otros consejos
Superposición de una imagen completamente transparente en la parte superior de ella todo lo que está vinculado a la página principal?
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow