ansaurus

Question

Answer 1

+2 A:

you could instead add an onClick handler to the div, and could place the link safely inside the div.

<html>
<head>
 <script>
   function clicked(){
     window.location.href="link2";
   }
 </script>
 <style>
 body{
   width:50%;
   margin-left:auto;
   margin-right:auto;
 }
 </style>
</head>
<div width="100px" height="100px" style="background-color:red" onclick="javascript:clicked()">
 <a href="link">test</a>
</div>

</html>

Orbit 2010-10-25 20:24:27

`javascript:` isn't needed in an inline event handler.

rhino 2010-10-25 21:12:57

Answer 2

+1 A:

Not only <A> elements cannot be nested, but (I believe) that the content must be inline, so DIV should not be used for links. I'd use, onclick in the outside DIV, for example:

<div id="myparentdiv" onclick="alert('go somewhere')">
hi bla bla blah
<br> hi <br>
<a onclick="document.getElementById('myparentdiv').onclick=undefined;return true;" 
href="http://stackoverflow.com/"&gt;go to st</a>
</div>

Obviously, you should replace the alert call with your redirection. The inside onclick is to avoid the event propagation.

leonbloy 2010-10-25 21:08:12

re the first part of the answer: If you're writing strict XHTML, then `<a>` tags cannot contain `<div>` or other block elements. However, the HTML5 spec does allow it, and even in other modes/doctypes, browsers quite happily cope with it; it's only Strict mode that will break.

Spudley 2010-10-25 21:14:37

Answer 3

+1 A:

This problem can be solved with jQuery like so:

<div class="linked">
    <a href="/somewhere">Text</a>

    <div class="linked">
        <a href="/somewhereElse">Text2</a>
    </div>
</div>

<script type="text/javascript">
    $("a").each(function(){
      var aTag = this;
      $(aTag).ancestor('.linked').click(function(){
          window.location.href = $(aTag).attr('href');
      });
    });
</script>

This gives you the best of all worlds: semantic HTML, and the auto propagation of a tag behavior up to the nearest 'linked' ancestor. It also conveniently allows for nesting.

Aaron 2010-10-25 21:14:04

Answer 4

A:

I agree with what the other users suggested. A tag can only be inline elements and therefore cannot wrap any other elements. Solution is to use the onclick event to handle the case where the user will click on the div tag. Inside the div tag then you can put other a tags which can point somewhere else.

This method however has a flaw, that is search engines will not be able to crawl the link wherever the onclick event is pointing. One way to fix this is to have another explicit link on the page which will point to the same link as the onclick. Here is the example:

<div onclick="document.location.href = 'link1.html'">
    <p>Content would go here...</p>
    <a href="link1.html">Click here or anywhere near me to go location 1</a>
    <a href="link2.html">Click here to go to location 2</a>
</div>

NOTE: The first a tag does not have to be inside the div tag.

This will allow users to click either inside the div or on the first a tag to go to link1.html, and the other a tag will go to link2.html. This will also allow search crawlers to index both links.

I would also recommend applying some CSS to the div tag, and wrapping the onclick javascript code into a function to make the code more manageable but that's not necessary.

Hope this helps.

miki725 2010-10-25 21:26:15

Answer 5

A:

If browser compatibility isn't of utmost importance, then you should have a look at this pure CSS solution. By using an AP anchor and the z-index property, you can have an anchor that's as big as the outer div that is layered on top of all the other contents.

In it's simplest form, it could look something like:

<div id="about_us">
    <h3>About Us</h3>
    <p>This website is the culmination of several months of intensive research
        and collaboration. </p>
    <p>We painstakingly gathered data and are presenting it to the world here. </p>
    <a href="#">Read More</a>
</div>

CSS:

#about_us {
    position: relative;
}

#about_us a {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    text-indent: -9999px;
}

This will give you anchor with the same size as the parent div, and is above all of the contents, as well as hide the link text so that it won't appear at the top left corner of the div.

For a more complex example, see: http://jsfiddle.net/545xy/2/

Yi Jiang 2010-10-25 21:54:47

ansaurus

tags:

views:

answers:

Nesting / layering html links <a>

Update

related questions