I have written a web page in which links are all contained within their own tags. I've also made them all button styles with CSS (border, background color, padding). How do I enable the whole DIV to be clicked to activate the link?
+3
A:
I think you had to write CSS for your "a" tags, instead of putting your links into divs and tunning divs with CSS.
Here is the example of the sidebar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*********************/
/* SIDEBAR */
/*********************/
#sidebar {
width: 160px;
float: left;
margin-top: 10px;
}
#news {
margin: 0px;
padding: 0px;
list-style: none;
font-size: 1.2em;
border-top: 1px dashed #294E56;
border-right: 1px dashed #294E56;
}
#news li {
display: inline;
}
#news .title {
font-weight: bold;
display: block;
color: #666666;
}
#news a {
text-decoration: none;
display: block;
padding: 5px;
border-bottom: 1px dashed #294E56;
color: #73AFB7;
line-height: 110%;
background: #FFFFFF url(images/bg/bg_link.png) no-repeat right top;
}
/* hack for IE 6 < to make entire block clickable */
* html #news a {
height: 1px;
}
#news a:hover {
color: #000000;
background-image: url(images/bg/bg_link_h.png);
}
</style>
</head>
<body>
<div id="sidebar">
<ul id="news">
<li><a href="#"><span class="title">Virgo: It's Your Month</span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Your Feedback </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">This Month's Survey </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Indoor lawns: sod or seed? </span>Lorem ipsum dolor sit.</a></li>
<li><a href="#"><span class="title">Lorem Ipsum </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Adipiscing elit </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Euismod tincidunt </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
</ul>
</div>
</body>
</html>
You can see it in action here: http://bazanov.net/sidebar
nightcoder
2009-06-07 18:25:47
I wanted the whole thing to be clickable, the text, and the area around the text.
chustar
2009-06-07 18:28:16
With pure CSS it is usually accomplished by using CSS for "a" tags and for spans inside "a" tags. I forgot about javascript solution, though, as J-P commented, user will not know if DIV is a link and is clickable.
nightcoder
2009-06-07 18:33:54
PS. And the whole thing would be clickable with pure CSS. You just need to tune your "a" and inner "span" tags.
nightcoder
2009-06-07 18:39:13
Oh, ok. I see how that works. Thanks.
chustar
2009-06-07 18:58:53
A:
I figured out how to do it. In the tag, create an onclick property then in that property, set window.location = (where you want to go). As in:
<DIV OnClick="window.location='http://stackoverflow.com'">
Content
</DIV>
chustar
2009-06-07 18:27:36
Very bad practice! How exactly will the user know that the DIV is a link? Anchors are given a bunch of extra behavioural enhancements by browsers - the DIV element won't be enhanced in any way. This is really a case of usability, or lack thereof!
J-P
2009-06-07 18:29:34
of course I'll have some other hints. They look like buttons, and when they mouse over, I'm setting the cursor to change to the selection thingy. This is just to show the solution I found the problem I had.
chustar
2009-06-07 18:35:03
Look at the example Lance McNearney posted. That's exactly what you were looking for and it doesn't require javascript.
slosd
2009-06-07 18:59:51
A:
Using jQuery you can do something similar to what chustar suggested:
$(div#name).click(function(){
window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')},
function () {$(this).removeClass('hovered')});
Brian Fisher
2009-06-07 18:30:47
+10
A:
The best way to do this kind of effect (making links act like buttons) is to apply css to the links themselves. Here's a basic example:
a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}
Test it out - the whole of the button is clickable. And it respects the browser's normal link actions like right-clicking, status url information, etc.
Lance McNearney
2009-06-07 18:53:52
What might be new to some folks is adding the "display: block" to the link. DIVs are "block" level by default, links are "inline". If you want an inline element to act like a div (and other block elements) just give it a "display: block" like above.
rpflo
2009-06-07 23:57:07
Thanks. I was just about to ask a question that your comment showed me how to fix!
chustar
2009-06-09 13:53:33
This won't work if the div you want to make clickable contains other divs since you can't embed divs inside of <a> tags.
Head
2009-06-29 21:24:43
+2
A:
Usually this is done in either of the following ways:
<div class='link_wrapper'>
<!-- there could be more divs here for styling -->
<a href='example.com'>GOto Example!</a>
</div>
.link_wrapper{
somestyles: values;
height: 20px; /*or whatever*/
width:auto;
padding:0px;
}
.link_wrapper a{
line_height:20px; /*same as .link_wapper*/
margin:0px;
}
Now the whole div is clickable.
Using Javascript this is also quite easy, this is using jQuery for easyness, however you could very easiyly do this without jQuery (if you do not already use it).
$('.link_wrapper')
.style('cursor', 'pointer') //very important, indicate to user that div is clickable
.click( function() {
window.location = $(this).find('a').attr('href');
}); //Do click as if user clicked actual text of link.
I highly recommend putting an actual link in the DIV as non-javascript user will not be able to use the link if there is no actual link in the DIV.
Pim Jager
2009-06-07 19:00:07
This is pretty good but it doesn't show the url in the status bar when you hover over it.
Head
2009-06-29 21:52:04