John Ibanez

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.