Making entire div clickable

HTML & CSS
1

I have a div that I am trying to make (entirely) clickable

The div has a class= comp_prod_stu_del

<div id="compare">
          <h1>Compare Our Racks
          </h1>
          <div class="comp_prod_stu_del">
          <h3>The Studio Deluxe™ Guitar Case Racks  </h3>
          <ul>
           <li>Designed for storing 7 – 9 guitar cases*</li>
           <li>Decorated with beautiful imported herringbone inlay edging</li>
          <li>Utilzes a hardwood 4-rail system</li>
          <li> Features hardwood-veneered sides </li>
          <li>Available in Red Oak or Walnut</li>
          </ul>
          </div>  </div>

I do not want to use JS. I have tried inserting an anchor inside the div (not wrapping the div) and setting the display on that anchor to “block” and setting the size to equal the size of the div, however when I do that, the other contents of the div get pushed out. I’m missing something in how I get around this unless there’s another method. Thanks

Here is what I have now for the css without any links inserted:


.comp_prod_stu_del {
	height: 160px;
	width: 650px;
	background: url(pics/compare/stu_del_bg.jpg) no-repeat;
	padding: 5px;
}
2

Look at part 2 (solution) to this quiz

Basically you overlay an anchor :slight_smile:

3

however when I do that, the other contents of the div get pushed out. I’m missing something in how I get around this unless there’s another method.

Hi,
Yes there is another way to do it. You can use an absolute positioned anchor so it is removed from the flow. That way it does not push other elements and it can cover the entire area.

http://www.css-lab.com/misc-test/click-div.html
http://www.css-lab.com/misc-test/click-div-2.html
http://www.css-lab.com/misc-test/click-div-3.html (IE6 expression)

4

There is more discussion about the pros and cons of the various methods in this recent thread.
Whole Div Clickable?

Maybe that will help you decide which method will suit you best. :slight_smile:

5

nice

seems to work fine so far. Not sure if this will work in IE6. I used the background I already had in the div.

      <div class="comp_prod_stu_del">
          <h3>The Studio Deluxe™ Guitar Case Racks  </h3>
          <ul>
           <li>Designed for storing 7 – 9 guitar cases*</li>
           <li>Decorated with beautiful imported herringbone inlay edging</li>
          <li>Utilzes a hardwood 4-rail system</li>
          <li> Features hardwood-veneered sides </li>
          <li>Available in Red Oak or Walnut</li>
          </ul>
          <a href="Store/buy_pages/session_del_red_oak.asp"></a>
          </div>

I didn’t see a “block” display in yours but I have it in mine. Do I need that still?

Thanks

}
.comp_prod_stu_del {
	height: 160px;
	width: 650px;
	background: url(pics/compare/stu_del_bg.jpg) no-repeat;
	padding: 5px;
	position: relative;
}
.comp_prod_stu_del a {
	text-decoration: none;
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	bottom: 0px;
6

No you don’t need it but it doesn’t hurt to have :).

7

thanks ryan