how do i make a link out of an entire div

[paste]

basically what i'm trying to do is make it so that you click anywhere within a div tag and it functions as a link. any advice?

-paste

[txbakers]

<a href="blah blah"><div>.........</div></a>

as long as you don't have any other closing tags in your div this should work.

[paste]

if i do that, it's not html 4.01 valid

[grahamstewart]

Yep - that's not cool.

You could use

display:block

on the link and give it a suitable width and a height (100% may work).

Or if the div contains text then just put the link around all the text.

[coopster]

Welcome to WebmasterWorld, paste!

I've done something like this with javascript, if that is an option for you...

<style type="text/css">
.hand {cursor: pointer;}
</style>
...
<div class="hand" onclick="window.open('mylink.htm','_self')">

[grahamstewart]

Wouldn't advise the Javascript route - it won't work for people who have javascript disabled (around 10% of users) and the search engine bots won't follow the link either.

paste: give me a better idea what you want to achieve? e.g post the code for the div you want to make into a link.

[txbakers]

if i do that, it's not html 4.01 valid

Neither is what you are trying to do.

It's a cool idea, but it's not "normal" usage and the validation police will be after you for it.

[globay]

Could this be done with a <span> -tag inside the <a> -tag? I am not sure if this would work or validate, but give it a try!

[coopster]

I'm not a big fan of the javascript route either, grahamstewart.

However, you can insert an

a

element with an

href

attribute and close it without keying any text (thereby eliminating any underlined links)...

<a href="mylink.htm"></a>

...which would still allow the bots to follow the link and it will validate HTML 4.01/XHTML 1.0 Strict.

Still, we haven't overcome the issue that you pointed out -- having javascript in the page. That is where the target audience may come into play. In the example I used, the target audience user agents must/will have javascript enabled.

I would like to believe there is a better solution, without using javascript, and am very anxious to follow this thread. Therefore I am eagerly awaiting paste's response to your question...

paste: give me a better idea what you want to achieve? e.g post the code for the div you want to make into a link.

[john_k]

Set up the content in the DIV as a normal HREF, but use a style with no underlining. Then also use the javascript onClick solution. If people have javascript enabled, then they get the benefit. If not, then they get a normal link.

[coopster]

True. You could setup the content as a normal

href

and it would work as well as validate. However, this solution won't validate if you have other markup within the

a

element. For example, the following won't validate:

<div style="cursor: pointer;"> 
<a href="mylink.htm" style="text-decoration: none;">Text 
<ol> 
 <li>Text</li> 
 <li>Text</li> 
</ol> 
</a> 
</div>

...and at this point it would be safe to say that we are pushing beyond "normal" usage as txbakers stated earlier. I did find at one time, however, that I wanted this type of feature. That's when I employed the javascript solution that works as well as validates:

<div style="cursor: pointer;" onclick="window.open('mylink.htm','_self')"> 
<ol>  
 <li>Text</li>  
 <li>Text</li>  
</ol>  
</div>

...leaving two issues in my mind.
First, it requires javascript which is not entirely bad, but if it isn't enabled...
Second, am I truly pushing something beyond "normal" usage?

The desired effect is to have a block of markup become a link, for whatever reason. Other solutions may be to put a different background or border around the div and include an

a

element or maybe a button to click as opposed to having the entire div being a link, but these are workarounds and not what paste is after.

Good discussion...

[ronin]

I don't know if this would work or not...

But since you can link a graphic, why not:

a) write the div as normal with no links

b) write a second div which fits exactly over the top using z-index.

c) In the second, top-most div place a transparent gif and link the transparent gif to your desired location.

I think this might result in the effect you are looking for.

[ricfink]

To Graham:

Your post says that 10% of users have javascript disabled.
Frankly, I have seen this number bandied about on discussion forums before and think it's a bunch of baloney. A myth.
I have worked and consulted for a lot of companies with users totaling in the hundreds of thousands and none of them enforced a policy of no javascript.

If you are quoting a reputable source on this, I'd be interested in knowing who or where.

thanks.

rich

[grahamstewart]

The "10% with javascript disabled" thing is one of those figures that you pick up while reading forums. It's been mentioned here quite a few times.

Since there is a distinct lack of global visitor statistics on the web I suspect that it is a figure which has largely been made up. :)
I did a little Google digging and I've found references to it being as high as 18%.

Looking at the "Global Stats" on counter.com helps a little.
For this March 2004 "javascript false" is currently sitting at 6%, but it fluctuates a lot, in December it was at 13%.

Here's a couple of WebmasterWorld threads discussing it:
TheCounter.com Javascript tests [webmasterworld.com]
Percentage of users who have javascript disabled [webmasterworld.com]

Regardless of the precise figure, the fact remains that a 'reasonable percentage' of surfers have javascript turned off. Some will be forced to do so by company policy, some will turn it off themselves to get rid of pop-ups and other annoyances, others may have 'security products' that block javascript, and others will be using browsers which do not handle javascript (phones, PDAs, TV browsers, text browsers, accessibility tools).

Plus spiders don't 'do' javascript, so if you use javascript for links then you'll need to supply some alternative anyway.

[vkaryl]

In December it was 13% because SO MANY sites had stupid "christmas" js rolling/trolling/scrolling away....

I'm NOT kidding.

[ricfink]

More on BROWSERS with javascript not enabled.

If the source of this nonsense is thecounter.com, remember that thecounter only measures individual pages for their subscribers. Hardly a valid statistical sampling. Further, what's their methodology?

One website recently reported this :

"Do you use Java or JavaScript? If so, do you know how many people have browsers that run them? TheCounter (Feb 2004) reports these levels of support:

Javascript Support: 5% disabled, 95% enabled

Note: TheCounter's stats have fluctuated wildly recently, likely indicating major changes in how TheCounter determines their availability."

Hey, "phones, PDAs, TV browsers, text browsers, accessibility tools" are one thing. But I simply will not buy a figure of 10% for users of IE, Moz, Opera, etc... having javascript turned off. It's nonsense, really.

Anyone who's done desktop support and worked face to face with real live users will tell you two things:

-Users very seldom change program defaults.
-By and large, users are AFRAID to fiddle with program settings.

And as a corporate consultant and network engineer/administrator myself, I've never been in an environment where javascript was turned off as a matter of company policy.
What for?

For IE users, I would have a hard time buying a number greater than one in a thousand users. If someone says otherwise, I want to know how they arrived at that number.

'nuff said

[grahamstewart]

True - thecounter is not exactly a reliable source, but there are a distinct lack of reliable statistical sources available on the net.
I'd love to hear the stats from Google or someone but counter was the best I could find. As always, your own visitor stats may be your best guide.

phones, PDAs, TV browsers, text browsers, accessibility tools" are one thing. But I simply will not buy a figure of 10% for users of IE, Moz, Opera, etc... having javascript turned off.

It doesn't say that they are ALL using IE/Moz/Opera, it just says that there is a significant percentage of people who want to view your site that may not be able to if you rely on Javascript.

Having said that, I frequently turn off Javascript when I hit an annoying page and often forget to turn it back on. It is very easy to turn javascript on/off in Opera, just F12, then a single click.

I've never been in an environment where javascript was turned off as a matter of company policy.
What for?

You may not have seen a policy regarding Javascript directly - but I'm sure you must encountered paranoid IT managers who insist on setting the 'Security' level in IE to 'High'?

Indeed Microsoft describe the High setting as "The safest way to browse, but also the least functional. Less secure features are disabled." - and one of those disabled features is Javascript.

I'm sure even 'afraid' users might be tempted to bump up the security level slider in light of the recent virus attacks.

Likewise I understand that some of the various 'internet security suite' products will turn off javascript on tighter settings.

[ronin]

I'm interested to find out - did anyone try my solution with z-index? Did it work?

[ricfink]

Hey ronin, graham and I are having a nice little conversation about javascript and here you come along bringing us back to the original subject! <g

I just wanted to cap off the javascript thing: I consider it good practice to make sure all aspects of a site are accessible, even without javascript.
I also see your point about how easy it is to disable jscript in IE by cranking security up to HIGH. didn't realize that until you mentioned it.

My beef is that none of us should be designing sites based on apocryphal numbers regarding user habits.

It's amazing how myths persist. A few weeks ago, I wanted to incorporate an iframe into a page and my new supervisor said, "But Netscape 4 users won't be able to see it!" But after hauling out the site analysis logs, I showed him that his fear was groundless.

'nuff said

... now how about that z-index thing, did anybody try it?