Few days ago, I was looking for the best way to make a DIV into a link when I came across this website: Almost Effortless!. The author showed how to make a div a link with a little bit of Javascript (see article). It is actually pretty simple:
The Javascript Technic:
view plaincopy to clipboardprint?
1.
By this method, the whole block is clickable with just a single line of code while, with CSS, you will need to set few parameters to get the same result. Pretty cool, no?
Here is the CSS technic:
Now, let’s see how it works with CSS.
First, put a link inside your div:
view plaincopy to clipboardprint?
1.
…and now set the link’s display property to 100% to fill the DIV in your stylesheet:
view plaincopy to clipboardprint?
1. #header {
2. width:300px;
3. height:100px;
4. border: solid #EEE;
5. }
6.
7. #header a {
8. display:block;
9. width:100%;
10. height:100%;
11. text-decoration:none;
12. }
13.
14. #header a:hover {
15. text-decoration:none;
16. background-color: #EFEFEF;
17. }
#header {
width:300px;
height:100px;
border: solid #EEE;
}
#header a {
display:block;
width:100%;
height:100%;
text-decoration:none;
}
#header a:hover {
text-decoration:none;
background-color: #EFEFEF;
}
Conclusion:
As you can see, the Javascript technic is faster than the CSS one but keep in mind that some people might disable Javascript in their browser and won’t see the link.
