22 Responses

  1. Chris Houston
    Chris Houston Published |

    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

    Reply
  2. Justin
    Justin Published |

    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>.

    Reply
  3. Tony
    Tony Published |

    Awesome Justin!!

    Thank you very much – makes it nice and clean! Exactly what I’ve been looking for!

    Tony

    Reply
  4. Brian
    Brian Published |

    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

    Reply
  5. Jocke
    Jocke Published |

    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

    Reply
  6. Arne Brasseur
    Arne Brasseur Published |

    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.

    Reply
  7. Eric Schmitt
    Eric Schmitt Published |

    @ 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..

    Reply
  8. Edward Kobus
    Edward Kobus Published |

    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!

    Reply
  9. Michelle E
    Michelle E Published |

    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.

    Reply
  10. Dimitry
    Dimitry Published |

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

    Reply
  11. Northman
    Northman Published |

    Justin,

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

    N

    Reply
  12. BLB
    BLB Published |

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

    Reply
  13. Kate
    Kate Published |

    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?

    Reply
  14. JD
    JD Published |

    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?

    Reply
  15. Angel
    Angel Published |

    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

    Reply
  16. Aaron
    Aaron Published |

    Worked perfectly. Thank you!

    Reply
  17. Bridgette Luersen
    Bridgette Luersen Published |

    Have been looking at doing some site optimization and improving the web design on my website for a long time, so this post has been very useful. Clear read as well, so thank you!

    Reply
  18. Jordi
    Jordi Published |

    Worked perfectly for my catalogue block. Thank you!

    Reply
  19. Faitmain-Faitcoeur
    Faitmain-Faitcoeur Published |

    Finally an easy tuto which works ….
    Thanks a lot !!

    Reply
  20. Nate
    Nate Published |

    Hi guys, I just came up with a different solution than yours. Hope this helps.

    Same window: onmouseover=”this.style.cursor=’pointer’;” onclick=”window.location.href=’http://www.extore.com/’” onmouseout=”this.style.cursor=’default’;” background=”http://www.extore.com/images/header1.jpg”

    New window: onmouseover=”this.style.cursor=’pointer’;” onclick=”window.open(‘http://www.extore.com’);”

    background=”http://www.extore.com/images/header1.jpg”

    Regards,

    Nate

    Reply

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php