Come collegare un colpo di testa in modo conforme agli standard?
Domanda
Ho un blocco di codice HTML che assomiglia a questo:
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
Io sto usando una tecnica CSS per nascondere tutto ciò che il testo e sostituirlo con un'immagine. Ma voglio collegare l'intero blocco alla homepage. Non posso avvolgere in <a>
perché non sarebbe conforme agli standard. Allora, come posso fare?
La mia soluzione; ispirato da Nuova in città
<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;
}
Soluzione
Mettere un elemento di collegamento esterno dei div intestazione e farlo coprirli utilizzando il posizionamento assoluto. Anche aggiungere un z-index per assicurarsi che il collegamento riceve l'input dell'utente.
<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>
Altri suggerimenti
Sovrapporre un'immagine completamente trasparente su di esso tutto ciò che è legato alla home page?
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow