Entire div as a link?

I want to use an entire div as a link.. without the use of "onclick"

Is this possible with a simple href?

Than开发者_开发问答ks

No, div elements cannot have the href attribute, nor will they act like links. You can use the following in HTML5:

<a href="#"><div></div></a>

However, not all current generation browsers (notably Firefox 3.6) supports this. The other alternative is to add a absolutely positioned a element that has 100% width and height to the div:

div a {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

This is valid HTML4, but it won't work on older versions of IE, of course. Otherwise should accomplish what you want. See: http://www.jsfiddle.net/uRh7j/

you can't. but you could use an <a> with style="display:block", wich should behave exactly like a <div>, to replace your <div>

simple answer is no, you can use onclick with css cursor:pointer to get the same functionality, though.

Per the HTML spec (HTML 4.01, Draft 5 and XHTML 1,1.1) an anchor tag <a> cannot enclose a <div> tag.

Wrap an anchor around it.

<a href="#"><div></div></a>

I do not think this is possible without the use of onclick event.You can use display:block; for displaying the link as a div but nothing else.

why not you use javascript framework such as jquery, let the div has no onclick event but declare an event in jquery, such this:

   <script>
         $(function(){ 
           $(".click").click(function{ alert('clicked!'); });
        });        
   </script>

   <div class="click"></div>

just my 2 cents. thanks.

You can accomplish this by creating a small transparent PNG (say, 10px * 10px) and using CSS to set the width and height of the PNG to 100%. Then you can wrap the img tag with your a href tag.

Here's the HTML:

<div id="YourHeader">
    <a href="http://example.com"><img src="/path/to/header10x10.png" /></a>
</div>

Here's the CSS:

#YourHeader img {
    width: 100%;
    height: 100%; 
}

This is especially handy if #YourHeader is an empty div whose only purpose is to display a header image via its background-image attribute.