Como ligar um cabeçalho de uma forma compatível com os padrões?
Pergunta
Eu tenho um bloco de HTML que se parece com isso:
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
Eu estou usando uma técnica CSS para esconder tudo o que texto e substituí-la por uma imagem. Mas eu quero vincular todo o bloco para a homepage. Eu não posso envolvê-la em <a>
porque isso não seria compatível com os padrões. Então, como posso fazer isso?
A minha solução; inspirado por New in town
<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;
}
Solução
Coloque um elemento de ligação externa das divs de cabeçalho e torná-lo cobri-los usando o posicionamento absoluto. Além disso, adicione um z-index para certificar-se o link recebe entrada do usuário.
<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>
Outras dicas
Overlay uma imagem completamente transparente em cima de tudo que está ligado à página inicial?
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow