Hyperlink a div

[Dani]

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 :(

[SnowDog]

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

<div style="position:absolute; left:0px; top:0px; border-color:#FFFFFF;
border-style:solid" CLASS="divname" 
onmouseover="style.backgroundColor='#FFFFFF';
this.style.cursor='pointer'" onmouseout="style.backgroundColor=''" 
onmouseup="somepage.htm"></div>

[remiremi]

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>

Hope this helps you buddy :idea:

[digital-ether]

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 :(

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:

<div class="dlink" href="page.html">click me</div>

<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>

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.

[digital-ether]

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.

[SnowDog]

Am I missing something? :)

The question was

Is it possible to make an entire <div> into a hyperlink using CSS only...

.

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?

[MattEvans]

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

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.

[SnowDog]

I am really, REALLY missing something here.

<div style="position:absolute; left:0px; top:0px; border-color:#FFFFFF;
border-style:solid" CLASS="divname" 
onmouseover="style.backgroundColor='#FFFFFF';
this.style.cursor='pointer'" onmouseout="style.backgroundColor=''" 
onmouseup="somepage.htm"></div>

makes the entire div a link.

[MattEvans]

onmouseup="somepage.htm"

is that not JS though?

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

onmouseup="window.location='somepage.htm'"

[SnowDog]

Well, no.

[digital-ether]

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.

Not really sure what you want...
But wouldn't

<a href="#" target="_blank"><input type="button" /></a>

work for you?
(You may have to define height and width for IE though).

If you're going to emula

te buttons with DIVs you'll definately have to do it will all buttons as you don't know what a button looks like on differnet platforms and browsers. But then you'll have to rely on JS to submit the form, and you dont what that.

You could probably just do something like:

<form name="real_form" ...>

<form target="blank" action="page_you_wanna_open.html">
<input type="submit" ... />
</form>

...

<input type="submit" name="real_submit" ... />

</form>

I don't think theres anything wrong with nesting forms?

Edit:

Or (but kinda ugly):

<form name="real_form" ...>

...

<input type="submit" name="real_submit" ... />

</form>

<form target="blank" action="page_you_wanna_open.html">
<input class="link_button" type="submit" ... />
</form>

<style>

input.link_button {
margin-top: = -[height of SUBMIT BUTTON]px;
margin-left: = [width of SUBMIT BUTTON plus your padding...]px
}

</style>

[tgreer]

This entire discussion is very amusing. In short, you have to use JavaScript for most of the questions in this thread. There is no reason not to do so, either. If you want a real-world solution, don't impose silly restrictions. This is like saying "I need directions from my business to yours, but I'll only take left turns".

[SnowDog]

What's even more funny is that the solution I provided - and which appears to be totally invisible to everyone - does not include any javascript (thank you very much), gives you an 'animated' button if you want it, and makes a whole div into a link as per the original question (I think).

Let me simplify it:

<div CLASS="divname" onmouseover="style.backgroundColor='#FFFFFF';
this.style.cursor='pointer'" onmouseout="style.backgroundColor=''#000000" 
onmouseup="somepage.htm"></div>

This creates a div which is white when you point at it and black when you don't, and the whole thing links to somepage.htm.

No Javascript and no anchor tags.

[tgreer]

Well, all the mouse event handlers are just that: event handlers. The events are provided by JavaScript. Also, the "style." is a reference to the DOM, and again is JavaScript. So while you may not have written any JavaScript functions, or put anything inside of script tags, your solution DOES use JavaScript. My point is, though: that's perfectly fine.

[MattEvans]

Not really sure what you want...
But wouldn't
HTML Code:
<a href="#" target="_blank"><input type="button" /></a>

work for you?
(You may have to define height and width for IE though).

nope, not with my doctype anyway (transitional)

I don't think theres anything wrong with nesting forms?

yerp, there is. it seems the action is taken from the first form.

i didn't use any absolute positioning in the end, i let the button in the form float, and the second button (in a floating form) fits right in there [on either side, depending on the float direction]. it only works if both forms have margin-top:0px and margin-bottom:0px.

This entire discussion is very amusing. In short, you have to use JavaScript for most of the questions in this thread. There is no reason not to do so, either. If you want a real-world solution, don't impose silly restrictions. This is like saying "I need directions from my business to yours, but I'll only take left turns".

well. not everyone has js available or enabled; and it's not very well standardised. i prefer to keep all neccessary functions outside of javascript, and use it for effects only.. i write pages with js dependant things hidden by default... then, if js can work, it shows all of those things, otherwise; the user doesn't even know what (or even what it is) that they're missing.

still, a browser that doesn't support JS probably doesn't support CSS either.. :P

[tgreer]

JavaScript is of course standardized. What confuses many is that it's a scripting language, so interacts with the underlying DOM, and that each doctype has its own DOM. Morever, JavaScript is used with other, non-HTML DOMs as well, such as Acrobat. However, the language itself is standardized.

I've been a web developer since the web's inception, and coded EDI and BBS systems prior to that... in all that time, in all the systems I've written or been involved with, there has never been a situation where we had to code around a "non-JavaScript" user. Not once.

So while I am absolutely all for people developing their own coding standards and best practices, I would recommend spending zero time worrying about "non-JavaScript" users.

[MattEvans]

JavaScript is of course standardized. What confuses many is that it's a scripting language, so interacts with the underlying DOM, and that each doctype has its own DOM. Morever, JavaScript is used with other, non-HTML DOMs as well, such as Acrobat. However, the language itself is standardized.

ah, you got me there, but the ramifactions are a consideration; however small.

it's not just doctype aswell, different browsers need to be considered regardless of doctype.. non-browser-dependant js code is usually quite messy looking at the very least.

for me it's a very small consideration; because i minimize the importance of js code :P if i scripted a site entirely in js, it would be a bigger consideration, as some people are absolutely nuerotic about their security online, and disabling js isn't difficult.

admittadly though, it isn't as likely as someone not having flash installed/enabled, or not having an up-to-date version of java.

there has never been a situation where we had to code around a "non-JavaScript" user. Not once.

not to deliberately perpetuate the, already well-perpetuated js-fear.. but you wouldn't neccessarily know the amount of non-js user's who couldn't use your company/ies, or client(s) sites if elements of those sites were totally js dependant.

for the most part, users go elsewhere when things don't work as expected, regardless of whether the problem's on a page, or with a security setting.. and almost anything that's functionally js-dependant doesn't need to be..

to me, that seems to need zero-consideration as to how to do something that may be important to standard flow, such as setting a hyperlink on something.

edit: although, that zero consideration ends up causing stoopidly large considerations sometimes; made annoying by the fact that one embedded line of JS would solve an otherwise difficult problem instantly and cleanly.

[katarey]

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 :(

Hi,

Sorry to replay even this Question is solved :)

But my view this may done by this way also "100% CSS"

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#adbar
		{
			margin: 0 0 0 0;
			padding: 0px;
			height:400px;
			background-color:#eeeeee;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			display:block;
		}
.adbar_links
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#eeeeee;
                        text-decoration:none;
		}
a.adbar_links:active, a.adbar_links:visited
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#cccccc;
                        text-decoration:none;
		}
a.adbar_links:hover
		{
			display:block;
			height:100%;
			width:100%; 
			background-color:#00ff00;
                        text-decoration:none;
		}
-->
</style>
</head>
<body>
<div id="adbar" ><a href="#" class="adbar_links">&nbsp;</a></div>
</body>

</html>

Rahul

[digital-ether]

I've learned more about CSS in the above then I have in the last month! Thanks dude..

Edit:

Then again, I haven't read a single bit of CSS in the last month. lol. :)

[tracedef]

Rahul, JUST what I was looking for... thanks!!!!!