Comments on: Valid XHTML Clickable Header Images

By: Angel

Angel — Wed, 09 Dec 2009 23:14:09 +0000

VERY new to all this…wondering if you’re still responding to this post? I’m looking for a clickable header – using a WP theme but not sure where to put this code in the header.php?? Would like to email you the code and if you could tell me where to put this text that would be super! Thanks

By: JD

JD — Sun, 23 Aug 2009 07:03:48 +0000

I was hoping this was a tut that i could use to change my header so it linked to another site Can you help with that?

By: Kate

Kate — Mon, 10 Nov 2008 03:21:16 +0000

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?

By: BLB

BLB — Wed, 05 Nov 2008 21:13:43 +0000

Thank you so much for this tutorial! Works like a charm.

By: Northman

Northman — Sun, 26 Oct 2008 04:45:28 +0000

Justin,

I’m just starting to convert my sites to CSS – and a clickable header was what I was looking for – MANY thanks!

By: Dimitry

Dimitry — Sat, 25 Oct 2008 12:35:15 +0000

Thanks! Save me a lot of time. That’s what I was looking for.

By: Michelle E

Michelle E — Tue, 21 Oct 2008 02:18:42 +0000

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.

By: Edward Kobus

Edward Kobus — Wed, 01 Oct 2008 20:57:26 +0000

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!

By: Eric Schmitt

Eric Schmitt — Wed, 30 Jul 2008 09:20:05 +0000

@ Arne Brasseur:

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

Andy Budd covers this in his book, CSS Mastery.. pg 65. While this method works well with screen readers, it does not work when images are turned off but CSS is turned on… probably only applicable for people with slow connections, or who use their cell phones as modems. For this reason, Andy cautioned against using this method. Instead he recommended the Gilder/Levin method as the most robust method currently available. This method adds an empty, non-semantic span element before the text. It uses relative position for the parent element and absolute positioning for the span element to “cover up” the text. Anyhow, just thought I’d chime in since I’m playing with this as well..

By: Arne Brasseur

Arne Brasseur — Wed, 23 Jul 2008 11:38:12 +0000

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

It works in Firefox, I still have to try the other browsers.