In this entry, I’m going to show you how to make a whole div to function as a link.
I will make my header as an example.
Normally, Header images such as mine are coded this way to set it as a link:
<div id="header"> <a href="http://example.com/"> <img src="./header.jpg" alt="" /> </a></div>
However, the problem comes when the image is the background of a div set at the CSS file. I’ve seen people put huge amount of spaces to fill the entire div and set it as a link. Which I believe isn’t a good coding practice.
The good thing is there’s a solution for that. Take a look at the code below:
<div id="header" onclick="location.href='http://example.com';"></div>
You’ll notice that an ‘onclick’ is set. That will make the Div be set as a link.
For wordpress you can use this:
<div id="header" onclick="location.href='<?php bloginfo('url'); ?>/';"></div>That way, you can keep the markup clean.
