Hele box kader klikbaar maken W3C-validator
Je wil een kader zo maken dat een hele div klikbaar is en naar een andere pagina linkt als erop wordt geklikt zonder JavaScript en met geldige code/markup.
Als ik dit is wat ik wil dat het resultaat doet:
<a href="#">
<div>Een link</div>
</a>
kader klikbaar met W3C-validator
De W3C-validator zegt dat blokelementen niet binnen een inline-element mogen worden geplaatst. Is er een betere manier om dit te doen? Dit is de beste oplossing:
<style>
div.feature {
position: relative;
}
div.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
</style>
<div class="feature">
<a href="http://www.example.com"></a>
<h3>Lorem ipsum</h3>
<p>Pellentesque sed lacus ut ipsum aliquam tincidunt. Donec eget quam non suscipit egestas. </p>
<button>Lorem ipsum</button>
</div>
Voorbeeld