Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 330
  • Last Modified:

can I make an entire DIV element clickable with a <a> link?

Is there some way to do something similar to this:

<a href="#"><div class="clickbox">content here</div></a>

...and have the entire DIV be clickable? So not just the text "content here" but the whole box? Like if I set a width: 300px height 300px anywhere within that would link? Thank you!
0
bbdesign
Asked:
bbdesign
  • 2
  • 2
  • 2
  • +1
3 Solutions
 
Roman GhermanCommented:
easy:
<html>
<body>
<a href="http://www.extremedev.blogspot.com" target="_blank"><div style="width:200px;height:150px;background-color:red;">Visit www.extremedev.blogspot.com</div></a> 

</body>
</html>

Open in new window

0
 
Greg AlexanderLead DeveloperCommented:
You could do it with JavaScript too:

<div class="clickbox" onclick="window.location="http://someurl.com">content here</div>
0
 
Randy DownsOWNERCommented:
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
bbdesignAuthor Commented:
Hmm, I must be doing something wrong on this page, then:

http://www.dbiservices.com/new/deangelobrothersinc/alenza1.asp

#caption1 {
            border: 1px solid #000000;
            position: absolute;
            width: 200px;
            height: 20px;
            top: 357px;
            left: 282px;
            padding: 80px 0px 0px 0px;
      }

<a href="http://www.dbiservices.com"><div id="caption1"><p class="nobr">Click for product labels and MSDS</p></div></a>

Any idea why mine aren't clickable at all?
0
 
Greg AlexanderLead DeveloperCommented:
Try with an onclick
0
 
Randy DownsOWNERCommented:
It looks like there are lots of urls in there if I can believe the source code IE shows

<h1>      CHEMICAL PRODUCTS, LABELS AND MSDS</h1>
 
<a href="http://www.dbiservices.com"><div id="caption1"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption2"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption3"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption4"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption5"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption6"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption7"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption8"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption9"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption10"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption11"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption12"><p class="nobr">Click for product labels and MSDS</p></div></a>
<a href="http://www.dbiservices.com"><div id="caption13"><p class="nobr">Click for product labels and MSDS</p></div></a>
 
<div class="alenza1a">
0
 
bbdesignAuthor Commented:
Ah, I found the problem. They were positioned absolutely. I changed z-index:2 and now they work. Thanks for the input!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now