Make a div into a link

 

I have a <div> block with some fancy visual content that I don't want to change. I want to make it a clickable link.

I'm looking for something like <a href="…"><div> … </div></a> , but that is valid XHTML 1.1.

Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.

For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.

In essence it's this:

  • Build your panel using normal CSS techniques and valid HTML.
  • Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
  • Inside that link, put an empty span tag ( <span></span> , not <span /> - thanks @Campey)
  • give the panel position:relative

  • apply the following CSS to the empty span: 

    { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}

    It will now cover the panel, and as it's inside an <A> tag, it's a clickable link

  • give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link

    • You can't make the div a link itself, but you can make an <a> tag act as a block , the same behaviour a <div> has. 

    a {
    display: block;
}

    You can then set the width and height on it.

    This is an ancient question, but I thought I'd answer it since everyone here has some crazy solutions. It's actually very very simple...

    An anchor tag works like this - 

    <a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

    Sooo... 

    <a href="whatever you want"> <div id="thediv" /> </a>

    Although I'm not sure if this is valid. If that's the reasoning behind spoken solutions, then I apologise...

    链接地址: http://www.djcxy.com/p/36512.html

    上一篇: 如何让按钮看起来像一个链接？

    下一篇: 把一个div变成一个链接