Is it possible to make an entire <div> into a hyperlink using CSS only, as can be easily accomplished with mouse events in JavaScript? I'm assuming it's too good to be true since CSS isn't interactive? Nevermind ... I guess I just answered my own question

The way I do it is as follows (for example):

[html]a.divlink, a.divlink:link {
display:block;
width:100%; /*width needs to be specified to work in IE*/
height:100%; /*height needs to be specified to work in IE*/
/*Other browsers expand the link to full width and height.*/
line-height:0;
font-size:0;
}



<div><a class="divlink">link</a></div>[/html]

Hope this helps you buddy

Nope, unfortunately you're right. You can't emulate links on any other HTML element with CSS. You'll have to use JS for that.
If its an issue of support for javascript than I don't think there's any way around it, but if its just code choice then you could just attach say a class to the div element and have JS run through and give it link properties.

eg:
[HTML]
<div class="dlink" href="page.html">click me</div>[/HTML]

[HTML]
<script>
// assuming you can select elements by class
document.prototype.getElmentsByClass = function(className) { ... };

var dlinks = document.getElmentsByClass('dlink');
for(var x in dlinks) {
var dlink = dlinks[x]; // closure (ie: dlink will be available in closure scope for onlick function when it is triggered in the window scope later on)
dlink.onclick = function() { document.location.href = dlink.href; };
}
</script>
[/HTML]

Even though its using JS, it emulates what you would normally do with CSS. However if you're working in an environment with only CSS on the client, then I don't believe it can be done.

Btw: adding a href attribute to a div will make it invalid xHTML1.0. So even if you found a way to do it with CSS, you'd run into that problem. The solution would be to create a custom DTD for your document.

Am I missing something?

The question was .

The solution I offered may not be what you'd class as 'only css' but it doesn't have a H REF and it assigns properties to a class. Is that wrong?

you can hyperlink the entire contents of a div... put an enormous image inside it, set the overflow to hidden, and hyperlink the image

i have a q, i was gonna start a thread but this is close enough to my question:

can you hyperlink a form submit field? O_o it seems trivial but it isn't proving easy... I want a form with a normal submit button (so I can't use the form action) and another button that just opens a new page... i don't want to use JS, and I don't mind how much markup i need on the page.. (actually, i'm using "button" rather than input/submit) so i guess, i can stick i giant hyperlinked image in a overflow controlled div in a typeless button.

messy =)

any better solutions..? o_O

EDIT: bah... that doesn't work though! who decided you can't have hyperlinked anchors in buttons? as i'm overriding the button graphical style anyway, i guess i can just emulate it with a div... i have to use JS to toggle the edges and padding to give a "clicked" appearance... but at least i don't have JS depandant functionality...

another solution.. is to absolutely place another form and button next to the submit button and use the form action... methinks that's messier.

I am really, REALLY missing something here.
makes the entire div a link.

is that not JS though?

EDIT: infact, it's not just JS, it's erroneous JS, should be

Well, no.