views:

7652

answers:

8

I am looking for an XHTML 1.1 valid way to make a DIV into a clickable link.

+2  A: 

Requires a little javascript. But, your div would be clickable.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
jjnguy
Results in bad semantics on the page though, so I'd avoid this one even though it is technically possible.
Arve Systad
Functional, but not really in the spirit of the question which is for an XHTML solution.
Soviut
I thought about using this solution, but it's kind of ugly. I like the solutions involving display: block better.
allyourcode
+23  A: 

You can't make the div a link itself, but you can make an <a> tag act as a block, the same behaviour a <div> has.

a {
    display: block;
}

You can then set width and height on it.

Soviut
However, this doesn't make a 'div' into a link. It makes a link into a block element. It's a bit different.
jjnguy
You could make a span a block element too, but there is a reason for different HTML elements.
jjnguy
This is solution of your problem. Because you can modify div can be clicked like hyperlink, but you can't set cursor(=hand) for display in all browser(only IE support it!).
Soul_Master
Using an 'a' tag for a block is like using tables for layout IMHO.
jjnguy
jjnguy: How? I dislike having lots of content in a link, but this could just as well be part of a navigation menu or something like that. An anchor element (<a>) doesn't necessarily have to be plain text, does it? In which way is it _wrong_ to make it into a block? It's semantically correct and it can be used to display it as you want.
Arve Systad
This is a perfectly valid solution to a vague question. You actually COULD simply wrap an anchor element around a div, but that would be semantically incorrect. (Block element within inline element).
Traingamer
jjnguy: This is pretty common practice. I'm not saying replace divs with links, but by the sounds of the question he just wanted a block he could click like a button or something.
Soviut
+6  A: 

This is a "valid" solution to achieving what you want.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

But most-likely what you really want is to have an <a> tag displayed as a block level element.

I would not advise using JavaScript to simulate a hyperlink as that defeats the purpose of markup validation, which is ultimately to promote accessibility (publishing well-formed documents following proper semantic rules minimizes the possibility the same document will be interpreted differently by different browsers).

It would be preferable to publish a web page that does not validate, but renders and functions properly on all browsers, including ones with JavaScript disabled. Furthermore, using onclick does not provide the semantic information for a screen reader to determine that the div is functioning as a link.

Calvin
A: 

While I don't recommend doing this under any circumstance, here is some code that makes a DIV into a link (note: this example uses jQuery and certain markup is removed for simplicity):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
     window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com"&gt;
     My Div Link
</div>

Once again, I wouldn't do this so please don't vote me down. I am simply just trying to answer the question.

Brian David Berman
Again, this is a functional solution, but not really in the spirit of the original question which was for an XHTML solution. While not a huge deal, your answer *does* start to add noise to the question.
Soviut
A: 

if just everything could be this simple...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

just think a little outside the box ;-)

philipp
A: 

This post is Old I know but I just had to fix the same issue because simply writing a normal link tag with the display set to block does not make the whole div clickable in IE. so to fix this issue far simpler than having to use JQuery.

Firstly let us understand why this happens: IE wont make an empty div clickable it only make the text/image within that div/a tag clickable.

Solution: Fill the div with a bakground image and hide it from the viewer.

How? You ask good questions, now listen up. add this backround style to the a tag

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

And there you have it the whole div is now clickable. This was the best way for me cause Im using it for my Photo Gallery to let the user clik on one half of the image to move left/right and then place a small image as well just for visual effects. so for me I used the left and right images as background images anyway!

enter code here
Drake
+3  A: 

Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.

For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.

You can see some examples of/variations on my solution on the homepage of http://www.easyodds.com/ (which I built), but in essence it's this:

  • Build your panel using normal CSS techniques and valid HTML.
  • Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
  • Inside that link, put an empty span tag
  • give the panel position:relative
  • apply the following CSS to the empty span:

    { position:absolute, width:100%, height:100%, top:0, left: 0, z-index: 1 } edit: added z-index

    It will now cover the panel, and as it's inside an <A> tag, it's a clickable link

  • give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link
thepeer
Thanks thepeer, that helped!
Tioneb