Justin Tadlock

This is a tutorial on how to make your blog or website header image clickable with valid XHTML. This is assuming that you’re using a CSS background image for your header or that you want to.

I was recently designing a theme that I wanted to add a clickable header image to, but had forgotten the best way to accomplish this task. So, I quickly searched Google and thought I found an easy way to do this with the WordPress clickable header tutorial, but quickly realized that it wasn’t valid XHTML. Many other tutorials showed this same example as well.

Basically, they were wrapping the <a> element around the <h1> element. This is bad. Very bad. CSS can do so much. Why ruin its beauty with poorly structured HTML?

After playing around with the CSS for a while, I came up with a solution.

First, you obviously need a header image. For the sake of this tutorial, the width and height of this image will be 350px by 90px. You can change the values in the CSS to match with your header image. Add this code to your header file or wherever your header image will go.

XHTML

<div id="header">
<h1>
<a href="/index.php" title="Blog Title"><span>Blog Title</span></a>
</h1>
</div>

Now, we need to style this thing.

CSS

#header {
	float: left;
	width: 100%;
	}
#header h1 {
	float: left;
	margin: 0;
	padding: 0;
	width: 350px;
	}
#header h1 a {
	padding: 0;
	margin: 0;
	width: 350px;
	height: 90px;
	display: block;
	background: url(images/header1.gif) no-repeat top left;
	}
#header h1 a span { display: none; }

These CSS values aren’t going to be exact all the time. Some things can change depending on your layout. Your positioning, height, width, margin, and padding are all variables that may need to change. The most important things are these lines:

#header h1 a {
	width: 350px;
	height: 90px;
	display: block;
	background: url(images/header1.gif) no-repeat top left;
	}

Giving the link (which has a background image) a width, height, block display, and adding the image are the things you must do.

That should pretty much do it. If you have any problems, please let me know through the comments. Otherwise, enjoy using your valid XHTML clickable header image.

You can also use this technique to make any element clickable with a background image, not just header images.