Create a Clickable div


December 12, 2007

Making a div clickable is a great way to cut out the traditional “home” button. All you need is a div and a tiny bit of code in order to allow your viewers a quick and simple way back home.

I saw a very interesting article the other day discussing the use of a clickable logo/header vs a traditional “home” button. It seems in general designers would rather just drop the “home” button and only use the logo as a link, but in my experience every client has insisted on having it listed somewhere in the navigation. My personal solution for this is simple; do both. If your logo is a background image enclosed in a div then this is the easiest fastest way to make it a link.

So now the code! All you need to do is copy this and change the id and URL to meet your needs. It has Ben Blogged!

Group: Web Design



3 Responses

  1. Chris M wrote @ December 27th, 2007 at 5:58 am

    Technically this is valid but I would say that there is a simple way to do it without using JavaScript where it is not necessary.

    I’ll stick the styles in-line but obviously you could use an ID.


    In your header (for example) you could do the style in an ID but add your logo as a background, change the span to a H1 element and rather then removing from the context of the page as I have above with display:none; you could set the height and width to 1px, overflow to hidden and position to left: -5000.

    This keeps the main element (the site name) search engine and screen reader friendly, provides your link to the homepage, creates a better underlying structure, and provides the same functionality of the above without resorting to JavaScript.

  2. Ben Blogged wrote @ December 27th, 2007 at 8:02 am


    Good point, that is a great way of doing it as well.

  3. Kareka wrote @ February 8th, 2008 at 8:33 am

    Usefull tip! :)