CODEWITHSUNDEEP
html
2318
2318

Reputation: 26

Convert whole div which contains anchor tags into a link

<div style="height: 100px; border: solid; border-width: 2px; border-color: #000">
Box 1
<p><a href="/a">A</a></p>
</div>

I want to convert the div into a link. Note that div includes an anchor tag. What is the best way to do it.

Following code doesn't work. But that's the rough idea to my problem.

<a href="/x">
  <div>
    Box 1
    <p><a href="/a">A</a>
    </p>
  </div>
</a>

Upvotes: 0

Views: 433

Answers (4)

2318
2318

Reputation: 26

The following code is worked for me. But I don't know it's a valid one even with HTML5.

<a style="display:block" href="/a">
    <div style="border: solid; border-width: 1px; border-color: #FFF">
        <div>
            <h3>Heading</h3>
        </div>

        <a href="/b" target="_blank">B</a>
        <a href="/c" target="_blank">C</a>
     </div>
</a>

Upvotes: 0

solimanware
solimanware

Reputation: 3051

You can simply add display: block; and use the height you need it will do the trick !

DEMO

or you can use inline javascript as that

<div style="height: 100px; border: solid; border-width: 2px; border-color: #000; cursor: pointer;" onclick="window.location='/a'">
  Box 1
  <p><a href="/a">A</a>
  </p>
</div>

Upvotes: 0

Tristan
Tristan

Reputation: 215

I have found a useful jsfiddle for you that uses <a class='default-link' href='javascript:void(0)' onclick='window.location = "http://www.google.com"'</a> for the actual <div>'s link, and then has independent links within this.

Click here to see the jsfiddle

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

— W3C Documentation

The anchor element may not contain any interactive content. This includes other anchors. This is one of the more strict rules too. It not only goes against spec, but it completely breaks functionality in major browsers. Chrome alone parses your example to include four links!

You'll need a preprocessing language to alter the markup (server side language or javascript on the front end manipulating ajax return data), or you'll just have to manually change the HTML. Either way, in the end, you'll need to switch that inner anchor out with a span or some other non-interactive element.

Upvotes: 1

Related Questions