I'll answer with a question: why use JavaScript which, as you say, may not be available, when there is a perfectly valid, semantic solution without it that delivers the same user experience? On Sep 14, 2013 5:25 AM, "Karl DeSaulniers" <[email protected]> wrote:
> Just curious, but why would you wrap a div in an anchor tag when you can > just use the onclick handler? > > <!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=UTF-8" /> > <title>Untitled Document</title> > <script type="text/javascript"> > function getURL() { > window.location.href = "http://somewebsite.com";; > } > </script> > </head> > > <body> > > <div onclick="getURL();"> > <h2>Header</h2> > <img src="someimage.PNG" /> > <p>This is some text!</p> > </div> > </body> > </html> > > Everything in the div is linked and no <a> tag throwing off any layout. :) > Only thing I can think of is if you are building a site that does not use > javascript for instance? > But other then that... > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > On Sep 13, 2013, at 1:39 PM, Chris Rockwell wrote: > > > Hey John - you understand correctly. Tom pointed that out earlier in the > > thread. > > > > > > On Fri, Sep 13, 2013 at 2:36 PM, john petroshius <[email protected] > >wrote: > > > >> my understanding is that with HTML5 it IS now correct to wrap blocks > with > >> an <a> tag... > >> > >> "...• Block-level links—Links can now be placed around block-level > >> elements. So if you need to link an image, headline, and paragraph text > to > >> the same place you can do it with just one link. > >> Here's an example. In HTML4 you had to write: > >> > >> <h2><a href="site.html">Headline</a></h2> > >> <p> > >> <a href="site.html"><img src="site.jpg" alt="site"></a> > >> <a href="site.html">Text about the site. Read More...</a> > >> </p> > >> But with HTML5, you need only one link around the entire block of HTML: > >> > >> <a href="site.html"> > >> <h2>Headline</h2> > >> <p> > >> <img src="site.jpg" alt="site"> > >> Text about the site. Read More... > >> </p> > >> </a> > >> ..." > >> > >> above code example from > >> http://webdesign.about.com/od/html5tags/qt/html5-links.htm > >> > >> -john petroshius > >> > >> > >> On Sep 12, 2013, at 2:28 PM, Chris Rockwell wrote: > >> > >>> Yeah, I don't think I've ever seen/notice it failing, I just prefer to > do > >>> it this way. Putting aside the fact that it's not correct, it just > looks > >>> funny, to me, to see an <a> around a bunch of content :) > >>> > >>> > >>> On Thu, Sep 12, 2013 at 3:24 PM, Tom Livingston <[email protected]> > >> wrote: > >>> > >>>> On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell < > >> [email protected]> > >>>> wrote: > >>>>> <a> is an inline element and cannot contain block level elements > (such > >> as > >>>>> <div>). > >>>>> > >>>>> One way is: > >>>>> > >>>>> .container { > >>>>> position: relative; > >>>>> } > >>>>> a { > >>>>> display: block; > >>>>> position: absolute; > >>>>> left:0; > >>>>> top: 0; > >>>>> width: 100%; > >>>>> height: 100%; > >>>>> text-indent: -9999em; > >>>>> z-index: 1 /* or higher if necessary */ > >>>>> } > >>>>> > >>>>> <div class="container"> > >>>>> <div>Some content here</div> > >>>>> <a>Link</a> > >>>>> </div> > >>>>> > >>>>> > >>>> > >>>> This is nice. I'll have to remember this one. > >>>> > >>>> I will say though, that I have wrapped other elements such as div in > >>>> an href with success in IE8+ and other "normal" browsers. > >>>> > >>>> -- > >>>> > >>>> Tom Livingston | Senior Front-End Developer | Media Logic | > >>>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > >>>> > >>> > >>> > >>> > >>> -- > >>> Chris Rockwell > >>> ______________________________________________________________________ > >>> css-discuss [[email protected]] > >>> http://www.css-discuss.org/mailman/listinfo/css-d > >>> List wiki/FAQ -- http://css-discuss.incutio.com/ > >>> List policies -- http://css-discuss.org/policies.html > >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > >> > >> > > > > > > -- > > Chris Rockwell > > ______________________________________________________________________ > > css-discuss [[email protected]] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
