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!
3 Responses
Comment
You must be logged in to post a comment.
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.
Benblogged
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.
Ben Blogged wrote @ December 27th, 2007 at 8:02 am
Chris,
Good point, that is a great way of doing it as well.
Kareka wrote @ February 8th, 2008 at 8:33 am
Usefull tip! 🙂