I personally wouldn't want the main function of my navigation, on a responsive site intended for many devices of varying ability, to be dependent on JS. Added effects, progressively enhanced, maybe, but not the main base function of navigating the site.
On Saturday, September 14, 2013, Karl DeSaulniers 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/<<http://css-discuss.incutio.com/> -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ 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/
