3

Possible Duplicate:
Link into full div - html and css

I'm trying to construct CSS where the <a> tag covers an entire <div> block, so that anywhere on the <div> can be clicked.

Here's how the final div should look (image is 64×64px):

enter image description here

Here's the HTML:

    <div>
        <img src="" alt=""/>
        <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </div>

Any CSS guru's help?

Community
  • 1
  • 1
dotnetnoob
  • 10,783
  • 20
  • 57
  • 103

7 Answers7

8

May be you can write like this:

<a href="#">
        <img src="" alt=""/>
        <h3><span>On The Beach</span> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </a>

CSS

a{
 display:block;
}

Note: as per html5 you can define block elements inside <a> tag

sandeep
  • 91,313
  • 23
  • 137
  • 155
2

If you want have to anchor cover the whole block, your HTML should reflect that. While block-level anchors are a fresh idea from XHTML2/HTML5, they are working in nearly all modern browsers (even IE 7).

Just enclose all the DIV's contents with the anchor:

<div>
    <a href="#nohref">
        <img src="" alt="" />
        <h3>On The Beach <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </a>
</div>


div a {
    display: block;
}

See also: http://html5doctor.com/block-level-links-in-html-5/

Shiny, but not new

What’s also very interesting about this technique is that actually this isn’t new: you can do it now. […] That’s one of the interesting things about HTML 5—it documents existing browser behaviour. As the browsers already handle wrapping links around block-level elements, and there is an obvious use-case, there was no reason to artificially keep the structure as invalid.

feeela
  • 29,399
  • 7
  • 59
  • 71
1

Wrap with anchor tag

 <div>
 <a href="#" class="cont-wrap-link">
 <img src="" alt=""/>
 <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
 <span class="details">Save 10% off all package holidays</span>
 <a>
 </div>

CSS

div a.cont-wrap-link
{padding:0px; margin:0px;
 display:block;
 text-decoration:none;
}
Murali Murugesan
  • 22,423
  • 17
  • 73
  • 120
1

Check out this Post

Remember: Ensure that the structure of the document still makes sense when CSS is not present.

Update

You can Achieve this using HTML5. Check this

Community
  • 1
  • 1
Vijay Sarin
  • 1,326
  • 1
  • 11
  • 31
1

Seeing as your doctype is HTML5 you can wrap the entire block in an anchor: 

<a href="yourURL">
<div>
        <img src="" alt=""/>
        <h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
        <span class="details">Save 10% off all package holidays</span>
    </div>
</a>

No need for any JS :)

Kyle
  • 65,599
  • 28
  • 144
  • 152
0

While this probably could be done with somewhat hacky CSS I believe JS (jQuery) is easier in this case:

$('#the-div').click(function () {
    $(this).find('a').eq(0).click();
});

Or something like:

var theDiv = document.getElementByID('the-div');

theDiv.onclick = function () {
    window.location = theDiv.getElementsByTagName('a')[0].href;
};
powerbuoy
  • 12,460
  • 7
  • 48
  • 78
  • 1
    You mean JS with the jQuery library. – Daedalus Sep 18 '12 at 09:04
  • Since it's so common nowadays I sometimes forget to mention that I'm using jQuery. But yes, I meant with jQuery. Updated answer with plain JS solution as well. – powerbuoy Sep 18 '12 at 09:06
  • A link is a link is a link. Hyperlinks are the part of a hypertext that are defining the WWW. It's the web's most basic feature and you are ruining every chance to work with them properly (e.g. open a link in a new tab; copying the anchor, …) by suggesting wild and dirty JavaScript hacks to achieve what HTML is already made for. – feeela Sep 18 '12 at 09:13
  • Well the link would still be there so it's not like I'm suggesting _only_ relying on JS. Although I agree that wrapping everything in the link is better. As you probably know this wasn't valid until recently however. – powerbuoy Sep 18 '12 at 09:20
  • I agree wholeheartedly with feeela here. Unless a function is specically targeted as a javascript enhancement all links should works as links. – dotnetnoob Sep 18 '12 at 09:32
  • Hmm, not sure I understand you there, but absolutely, if you're using an HTML5 doctype or don't care about validation then the best solution is definitely to wrap everything in a link. – powerbuoy Sep 18 '12 at 11:32
0

I would suggest to add onclick="location.href='http://google.com';" style="cursor:pointer;" to your div tag.

Francis
  • 244
  • 1
  • 4
  • 14