Welcome to WebmasterWorld Guest from 54.158.36.59

Forum Moderators: not2easy

Message Too Old, No Replies

hyperlinking a div

     
10:03 pm on Oct 29, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I hyperlink divs by:

<a href="#"><div id="link"></div></a>

But I dont think this is W3 compliant. Especially when you start adding elements in the div.
Is this the done way?
10:24 pm on Oct 29, 2012 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Nasty. Don't do it.

You've been around for a decade, surely you know all about block and inline elements?
10:38 pm on Oct 29, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



In your stylesheet:
#link{height:333px;width:777px;}
.linkwholediv a{display:block;height:100%;width:100%;}

In your html:
<div id="link" class="linkwholediv"><a href="http://www.example.com/">Div Link Test</a></div>

Of course you will be limited to one link per div.
7:56 am on Oct 30, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What about span?
e.g. is <a href="#"><span>link text</span></a> acceptable?
8:30 am on Oct 30, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



What's the span for? If you need styling, you can attach it directly to the "a" element.

Putting a whole div-- or any block-level element, or even whole layers of them-- inside a link will unfortunately work in most browsers. I say unfortunately because it's baaaad and you should never do it.

I was recently in a situation where it would have been oh so much easier to wrap the link around a div, which in turn contained both an image and a paragraph. And I knew it would work, at least with the intended audience. But I couldn't bring myself to do it. Stuck between a rock and a hard place, I went with js "onclick" instead :(
8:09 pm on Oct 30, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The span would be so I can have part of the link a different size or color for example.
<a href="#">Link Text<span>Larger Text</span></a>

So JS might make things easier, so u just select the elementbyid onclick.
10:49 pm on Oct 30, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I say unfortunately because it's baaaad and you should never do it.


I've been thinking it over and can't come up with any real good reason why it would be baaaaad. I haven't used it myself because I have never had a need for it but I wouldn't hesitate if I saw a valid purpose.

I just see it as cutting a hole in the end of a shoebox (the div) and pushing an uninflated balloon (linkwholediv class) into that hole and inflating it to fill the volume of the div.

Please help me understand why that's a bad thing. Why did you decide to not apply something like that when you needed it and went with javascript instead?
12:45 am on Oct 31, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Why did you decide to not apply something like that

I don't see how it would have helped. There's nothing wrong with having a link inside a div; the no-no is putting further block-level elements inside a link. The overall structure in my case would have been

<div style blahblah, including "text-align: right">
<a href = "link here">
<div style more blahblah, including "display: inline-block; text-align: center;">
<p style blahblah>Text here</p>
<p style blahblah><img src et cetera></p>
</div>
</a>
</div>


To make sure I wasn't remembering wrong, I fed the snippet into the w3 validator using the "HTML fragment" option. It was perfectly happy with the "onlick" version. (It was attached to the inner div, which is a visible unit.) But when I tried the "a href" version, it predictably spat out an error, with explanation
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Again: doing it wrong would have worked. But you can't get in the habit of doing things you aren't supposed to do, just because they happen to work.
1:23 am on Oct 31, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hmmmmmm well the example I offered above ( <div id="link" class="linkwholediv"><a href="http://www.example.com/">Div Link Test</a></div> ) did validate -- I ran it through the validator before pasting it into this thread. So I still don't understand how it's doing anything wrong (but maybe it's just me). For example I might consider using it if I have a div that only contains a single image. Maybe that div would be padded to keep it spaced away from another such div next to it. That way the clickable area is not limited to the image itself but also the area around the image which is within the div. I didn't actually just try this -- just trying to think of a use.
6:33 am on Oct 31, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



I think you're missing the point :( The original post said:
<a href="#"><div id="link"></div></a>

But I dont think this is W3 compliant. Especially when you start adding elements in the div.

Your example has the link INSIDE the div. We're talking about links OUTSIDE a div. Or outside any other block-level element. An image alone is not block-level, so it has no effect on validation.
11:24 am on Oct 31, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Putting a link around almost any element is now valid and will pass the validator. There are still a few where it's not but div is just find, as are spans.
[developers.whatwg.org...]
6:57 pm on Oct 31, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hmm confusion.
So it is not W3c compliant - but it is actually fine to use, and is compatible with almost all browsers, not to mention it allows you great flexibility on linking desired areas.

Is that the summary?
10:10 pm on Oct 31, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Putting a link around almost any element is now valid and will pass the validator.

We now descend to "Who am I gonna believe: you or my lyin' eyes?" Don't know about the rest of youse, but when I say "the validator" I mean

[validator.w3.org...]

A snippet with divs inside an <a href> validates as neither HTML 4.01 nor XHTML 1.0 (the two available options in "HTML fragment" mode). It does validate in HTML 5 if you wrap it in the appropriate tags to make a complete document-- but 5 isn't simply a looser version of 4. It's got a whole different set of rules. And it's clearly labeled "tentative" and "experimental".
10:24 pm on Oct 31, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Your example has the link INSIDE the div. We're talking about links OUTSIDE a div.


Yes I was aware of that. I know the OP was the reverse but I simply gave a solution that turned it inside out, worked, and validated via the W3C Validator.
12:09 am on Nov 1, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



@lucy24 - See my link above which is also copied on the W3C site. The current validator passes this when using the html5 doctype. All current browsers will also work this way. It puts all browsers into standards mode.
12:43 am on Nov 1, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



when using the html5 doctype

Well, that's the issue isn't it? And I did say at the beginning that it works even if it doesn't validate :)
12:55 am on Nov 1, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't know that it's an issue with anyone. It does validate with that doctype.
1:08 am on Nov 1, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Who's on first, not me I'm on second, who's that on third, don't know I'm on first, is that you on third, I don't know whatson first?
1:17 pm on Nov 9, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



how about...

HTML:

<div class="foo">
<p>Content...</p>
<p>Content...</p>
<a href="#">link</a>
</div>

CSS:

div.foo {
position:relative;
width:100px;
height:100px;
}
div.foo a {
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
z-index:199;
}
 

Featured Threads

Hot Threads This Week

Hot Threads This Month