Make entire div a hyperlink

Question

How do I make my entire pad div area a hyperlink?

Here's my HTML:

    <div class="pad">
    <div href="http://www.google.com" style="height:286px;width:286px;background:url('http://placehold.it/1x1') top center no-repeat;background-size:cover">
        <div>
            <span>View all</span>
        </div>
    </div>
</div>

score 3 · Accepted Answer · answered Feb 05 '15 at 21:41

3

<a href='http://www.google.com'>
<div class="pad">
    <div style="height:286px;width:286px;background:url('http://placehold.it/1x1') top center no-repeat;background-size:cover">
        <div>
            <span>View all</span>
        </div>
    </div>
</div>
</a>

wrap a tag around the whole thing!

answered Feb 05 '15 at 21:41

taesu

4,482
4
23
41

if you but the a inside the div and give style display:block; width:100% would be better so the div.pad will have the same position as before – Hager Aly Feb 05 '15 at 21:44
you can make it go away by hacking css, but this question did not ask for such – taesu Feb 05 '15 at 21:45
This is excellent. Semantically, is it sound? Or should I consider having a `` tag before the closing `` and force this to `width:100%;height:100%`? – michaelmcgurk Feb 05 '15 at 21:53
depends what you want to do. It is sound semantically. please with fiddle and see what happens! – taesu Feb 05 '15 at 21:56

score 2 · Answer 2 · answered Feb 05 '15 at 21:41

2

Use "onclick=" event instead of href

<div onclick="document.location='http://www.google.com'> ...

answered Feb 05 '15 at 21:41

Damien

119
1
9

there is no javascript tag in this question, but it should work? – taesu Feb 05 '15 at 21:42

Make entire div a hyperlink

2 Answers2