Link into full div - html and css

Question

Hello, I have:

 <div class="sliderPart">                                                                  
    <a href="#computers">
       <strong>Some text</strong>
    </a>
 </div>

.sliderPart {   
    width: 25%;
    height: 100%;
}

.sliderPart a {
    display:block;
    position:relative;
    text-decoration:none;
    height: 100%;
    font: 1.3em  Arial, Sans-serif;
}

How can I make my link clickable for all div-area?

Answer 1

Put the link outside the div. You can make an anchor tag act similarly to a div. Like you're doing in the css you posted.

Answer 2

The easiest thing is to remove the div altogether:

<a href="#computers" class="sliderPart">
   <strong>Some text</strong>
</a>

a.sliderPart {
  ...
}

Answer 3

For dropdown lists, I use the following method a lot...

If you're not opposed to using scripts, you can make the div itself a proxy of sorts, so that if you click anywhere on the div, the first link within that div is subsequently clicked automatically.

$(".sliderPart").bind("click", function(){
  $("a:first", this).trigger("click");
});

Of course you would want to update your styles for the div when you mouse over it to indicate the entire thing is clickable.

Answer 4

Try this:

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

..you'd also need to give cursor: pointer to the clickable element.

Answer 5

Great, that was exactly what I was looking for as well!