How to link a header in a standards-compliant way?
Question
I have a block of HTML that looks like this:
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
I'm using a CSS technique to hide all that text and replace it with an image. But I want to link the whole block to the homepage. I can't wrap it in <a>
because that wouldn't be standards-compliant. So how do I do it?
My solution; inspired by 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;
}
Solution
Put a link element outside of the header divs and make it cover them by using the absolute positioning. Also add a z-index to make sure the link receives user input.
<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>
OTHER TIPS
Overlay a completely transparent image on top of it all that is linked to the homepage?
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow