Entire Div a Link, w/o Javascript, Valid, Standards-Friendly -- Help?

Hey guys,

I am a standards and validation designer. Everything I do must conform to standards and needs to be XHTML Transitional (Prefer Strict) valid and CSS valid. I've come across a troubling situation where I have found a few tricks that cover a few parts of what I need, but not the entire thing.

Let me make a few things clear:
1) The entire div in this scenario must be clickable to bring the visitor to another page.
2) This div will contain block-level elements, meaning a simple <a></a> around the div will not work.
3) This div needs to contain at least two text-links that will route them to different pages or anchors.
4) Any proposed scripts cannot use JavaScript.

Let's set up my scenario:
I have a blog that I want the main page to display it's entries in a unique fashion: each entry will have it's own slightly small div which will include the post title, subtitle, a few clickable tags, and a clickable comments (#) option.

The entire div must be clickable to bring the user to the blog post, although, if the user clicks a tag, it must take them to a filter for that tag, and if the user clicks the Comments (#) it must take them to the #comments anchor on the post page.

This is a problem, obviously. Block-level elements cannot go within an a tag, it simply does not conform.

A few methods I have approached:
1.) Setting a link without any text with an absolute value, positioning it, and laying it over the div. This creates the problem of needing to generate style="" tags to create positions for each div. Obviously not friendly in any way.
2.) Setting a link relatively with a specified height and width. This works... somewhat, but it covers up the tag links and comment links.
3.) Using z-index to lay over. Same problem as above.

I'm really hoping you might understand what I am attempting here. If people are a little lost, when I get back from dinner tonight I will throw together a rough sketch to show an ideal scenario. I'll also be cracking away on certain attempts of my own, but any help is appreciated.

Best,
Ryan

Nope, that sounds strange. Why would you want an entire div to link through to the blog post? You do realise there is a reason you can't easily do that - because it's stupid. People will come, see text, and will go to click on the heading or whatever *looks* like a link if they want to read more/view tags/comment (hence why you often hear people stay stick to blue and underline). If they are moving their cursor over normal text and there is a hand cursor active they'll be wondering wtf (even I would, though I'd be able to figure out why eventually)

You want a whole block to be a link, but you want separate links also? You do realise that this is an absolute NIGHTMARE accessibility wise and you will be lucky to get any repeat visitors? There's being unique in a good way... and unique in a bad way.

My opinion - don't even try this unless you are trying to get onto the "worst sites of 2008" list, in which case it's a great idea.

Huh, I'll just go ahead and ignore everything you just said. Thank you for your concern, though.

That's cool, not my site that's going to be ruined.

Originally Posted by rochow That's cool, not my site that's going to be ruined.

As sound as your advice is, there's no need to be rude (yes, you are being rude) about it. I for one can see usability benefits to techniques similar to the one being discussed here, it just needs to be done right (or not at all).

there's no need to be rude (yes, you are being rude)

Meh. I'm don't know whats stupider: the idea, or the fact every point I raised is just going to be ignored and there'll be one more nightmare website in existence.

I for one can see usability benefits

Please name even just 1 valid benefit of this concept.



This is what you want to do, correct? Basically the entire post (black bit) links to the post, with some links ontop (in red) that go to different places?

So when someone puts their cursor over NOTHING (all that empty white space) it will link to something. Can you not see how non-user friendly that is? Their cursor is a link yet there is nothing there.

Meh. I'm don't know whats stupider: the idea, or the fact every point I raised is just going to be ignored and there'll be one more nightmare website in existence.

Or when someone is genuinely seeking help and then an overzealous, pretentious code monger jumps all over him. That's pretty stupid.

Originally Posted by WiredOrange Or when someone is genuinely seeking help and then an overzealous, pretentious code monger jumps all over him. That's pretty stupid.

Or when someone is seeking help, gets multiple reasons why they should consider something else, and they decide to go with it anyway.

Exact same thing, different scenario:
I go to my doctor and say "Look, I'm thinking of trying XYZ pills" and they say "No it's bad for this reason, that reason and this other reason. You should consider an alternative" and I say "Huh, I'll just go ahead and ignore everything you just said. Thank you for your concern, though".

What an idiot. If you think you know everything, then why the heck would you even ask.

While this would be VERY easy to do, I have to agree with rochow. This is a stupid idea and very non user-friendly. I also agree that someone seeking help/advice should seek it with an open mind and should expect critique.

I also agree that someone seeking help/advice should seek it with an open mind and should expect critique.

True, however there's a clear distinction between helpful criticism and being an ass.