How to link a complete DIV container?

Question

i have the following div Container (including a background image).

<div class="haus"></div>

how can i link this DIV to an url?

possible duplicate of [Make a div into a link](http://stackoverflow.com/questions/796087/make-a-div-into-a-link) — Michael Schmidt, Sep 25 '13 at 10:59

score 3 · Answer 1 · edited Sep 25 '13 at 09:14

3

use the <a> tag :

<a href="">
    <div class="haus"></div>
</a>

edited Sep 25 '13 at 09:14

David Thomas

answered Sep 25 '13 at 09:13

Donovan Charpin

Do note that this is only valid under HTML5 though (it'll work under the HTML 4 doctype, but it's not valid HTML). – David Thomas Sep 25 '13 at 09:15
Yes maybe pass the in display:block; and remove
it's better?
– Donovan Charpin Sep 25 '13 at 09:23
i set the link, but it is not on right position. see here: http://schwedenladen.de in top header the little house and the words i want to link. – emitremmus Sep 25 '13 at 09:34
1

The problem it's your little house is not an single element but integrated on your background-image of the header. The solution is just put a background blue on the header without the image. After put just an image with your house and the words. – Donovan Charpin Sep 25 '13 at 09:42

Michael Schmidt · Answer 2 · 2013-09-25T09:31:34.750

0

Surround the div with the a-link tag

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

Or you can use onClick

<div onClick="self.location.href='http://www.google.de'" class="haus"></div>

Or a "experimental" way is to add the div a <a> link and call it over jQuery:

<div class="haus">
   <a href="#" style="display:none;">link</a>
</div>

jQuery Script:

$(".myBox").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

edited Sep 25 '13 at 09:31

answered Sep 25 '13 at 09:14

Michael Schmidt

i set the link, but it is not on right position. see here: http://schwedenladen.de in top header the little house and the words i want to link. – emitremmus Sep 25 '13 at 09:35

score 0 · Answer 3 · answered Sep 25 '13 at 09:18

0

Pretty Easy , like this :

<a href="htps://www.google.com">
    <div class="haus">
        This is div
    </div>
</a>

answered Sep 25 '13 at 09:18

The Dark Knight

i set the link, but it is not on right position. see here: http://schwedenladen.de in top header the little house and the words i want to link. – emitremmus Sep 25 '13 at 09:32

score 0 · Answer 4 · answered Sep 25 '13 at 09:25

Use this if you want to keep the next element in the same line

<a href="htps://www.google.com">
   <div class="haus" style='display:inline-block'>
    text
   </div>
</a>

or just

<a href="htps://www.google.com">
   <div class="haus">
    text
   </div>
</a>

This is also fine withe some JS work

<div onClick="self.location.href='http://www.google.com'" class="haus"></div>

avrahamcool · Answer 5 · 2013-09-25T11:45:32.800

I would do it the other way around. by making the a to take all the div space. Live Fiddle

That way, it will validate under any doctype.

personally I think it's clearer that way. but, its debatable.

HTML:

<div class="haus">
    <a href="htps://www.google.com">This is link in the div</a>
</div>

CSS:

.haus
{
    background-color: azure;
    height: 50px;
}

.haus a
{
    display: inline-block;
    width: 100%;
    height: 100%;
}

5 Answers5