homepage Welcome to WebmasterWorld Guest from 23.20.220.79
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
hyperlinking a div
whatson




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

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?

 

g1smd




msg:4513528
 10:24 pm on Oct 29, 2012 (gmt 0)

Nasty. Don't do it.

You've been around for a decade, surely you know all about block and inline elements?

SevenCubed




msg:4513533
 10:38 pm on Oct 29, 2012 (gmt 0)

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.

whatson




msg:4513663
 7:56 am on Oct 30, 2012 (gmt 0)

What about span?
e.g. is <a href="#"><span>link text</span></a> acceptable?

lucy24




msg:4513669
 8:30 am on Oct 30, 2012 (gmt 0)

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

whatson




msg:4513905
 8:09 pm on Oct 30, 2012 (gmt 0)

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.

SevenCubed




msg:4513973
 10:49 pm on Oct 30, 2012 (gmt 0)

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?

lucy24




msg:4513990
 12:45 am on Oct 31, 2012 (gmt 0)

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.

SevenCubed




msg:4514006
 1:23 am on Oct 31, 2012 (gmt 0)

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.

lucy24




msg:4514068
 6:33 am on Oct 31, 2012 (gmt 0)

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.

drhowarddrfine




msg:4514105
 11:24 am on Oct 31, 2012 (gmt 0)

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

whatson




msg:4514312
 6:57 pm on Oct 31, 2012 (gmt 0)

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?

lucy24




msg:4514399
 10:10 pm on Oct 31, 2012 (gmt 0)

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

SevenCubed




msg:4514404
 10:24 pm on Oct 31, 2012 (gmt 0)

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.

drhowarddrfine




msg:4514435
 12:09 am on Nov 1, 2012 (gmt 0)

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

lucy24




msg:4514443
 12:43 am on Nov 1, 2012 (gmt 0)

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

drhowarddrfine




msg:4514446
 12:55 am on Nov 1, 2012 (gmt 0)

I don't know that it's an issue with anyone. It does validate with that doctype.

SevenCubed




msg:4514452
 1:08 am on Nov 1, 2012 (gmt 0)

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?

benihana




msg:4517514
 1:17 pm on Nov 9, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved