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 support forums. 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.
Hi Justin, this was exactly what I was originally wrapping a DIV with a LINK. Now it’s all fixed and our site is valid XHTML
Thanks for posting!
Chris
No problem Chris. I’m glad somebody finally used this tutorial. I expect the masses are still wrapping the
<a>element around<h1>or<div>.Awesome Justin!!
Thank you very much – makes it nice and clean! Exactly what I’ve been looking for!
Tony
You are a legend , well done. I’ve been searching online for hours looking for a valid markup example of this and your solution is perfect. Works perfectly. Much appreciated for this post
excellent work
No problem guys.
Brian
I’ve searched and searched before because I’m a bit of a lazy coder sometimes. I was so surprised that there were so many invalid XHTML examples out there, and these were blog posts with 100+ comments sometimes thanking the author.
Nice!
But you can’t use “display: none” for the SPAN. Anything set to display: none or hidden won’t be used by screenreaders (like JAWS 9) making it useless for blind people.
Love to see a valid solution for that one.
/J
I suppose we could just make our sites a little uglier to accommodate everyone in the world too.
There are several techniques to replace
display: none, but this seems like the best solution. Screen-readers are getting better, and many support this property now.How about adding
text-indent: -9999px;?
This makes the text disappear, but it will still be read by screen readers, and you don’t need the extra <span>
It works in Firefox, I still have to try the other browsers.
@ Arne Brasseur:
Hey Justin,
I want to use pictures as links. To show the user the picture is indeed a link this picture has to change when the mouse moves over. I do know how to do this in plain html, in a wordpress header however it won’t work; no picture is shown except for this tiny 1px high thingy that does work.
code:
Any idea?
Thanx!
Thanks so much for taking the time to post this tutorial. I learned html back when CSS was still thought of as risky and not supported by browsers, so re-learning now is really amazing! So many great new tricks and techniques. This one worked great.
Thanks! Save me a lot of time. That’s what I was looking for.
Justin,
I’m just starting to convert my sites to CSS – and a clickable header was what I was looking for – MANY thanks!
N
Thank you so much for this tutorial! Works like a charm.
I have been using a variation of this code for my own header for awhile now, but I have not been able to figure out how to do a second row of clickable header image/links. Any advice?