[html5] Content Ordering

Nathan Ziarek nziarek at gmail.com
Wed Jun 15 16:07:07 PDT 2011


I think box-ordinal-group is the 100% right way to do it ... it's just finding support.

Another way I've been toying with  (for SEO reasons) is to structure the HTML in a way that puts the content as close to the top as possible:


<html>
<head />
<body>
	<div id="content>
	<div id="logo">
	<nav id="main">
	<nav id="footer">
</body>
</html>

Then, I place #logo and #main at the top of the screen using position:absolute and move the content pane into place using margin-top. That way, the content still pushes the footer down as it flows and resizes. It works surprisingly well across browsers back to IE6, but can cause problems with scaling. That can get tricky, since you're then dealing with percentages and ems.

Here's an example ... only tested in Safari and iPhone: http://org.asq.uxl.s3.amazonaws.com/boilerplate-with-mobile.html

Happy to answer any questions. Again, I think box-ordinal-group is the best way to go, but this way sure has it's advantages.

nz



On Jun 15, 2011, at 4:42 PM, Jordan Dobson wrote:

> Try using the box-ordinal-group in CSS3 for browsers (mobile?) that support it.
> 
> Basics here:
> 
> http://www.html5rocks.com/en/tutorials/flexbox/quick/
> 
> -- 
> Jordan Dobson • Designer / Developer • 425-444-8014 • About.Me/JordanDobson
> 
> On Jun 15, 2011, at 2:17 PM, "Nazir, Cassini" <cassini at utdallas.edu> wrote:
> 
>> Is it possible to re-order content using CSS without using absolute positioning? Here's what I mean:
>> 
>> I'm playing around with multiple stylesheets for a site that I'm working on. I would like the <nav> content to appear before the <article> content on desktops, but on mobile devices I would like the <nav> content to appear after the <article> contents.
>> 
>> So the code might be something like this for desktops:
>> 
>>  header { order:1; }     /* this would appear first */
>>  nav { order:2 } /* second */
>>  article { order:3 }       /* last */
>> 
>> But on mobiles something like this:
>> 
>>  article { order:1 }
>>  nav { order:2 }
>>  header { order:3 }
>> 
>> Not sure if this makes sense. Is this possible using CSS only and not PHP?
>> 
>> Cassini Nazir
>> 
>> Web Developer, Student Affairs
>> The University of Texas at Dallas
>> 
>> _______________________________________________
>> Help mailing list
>> Help at lists.whatwg.org
>> http://lists.whatwg.org/listinfo.cgi/help-whatwg.org
> _______________________________________________
> Help mailing list
> Help at lists.whatwg.org
> http://lists.whatwg.org/listinfo.cgi/help-whatwg.org

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20110615/49a11bcb/attachment-0003.htm>


More information about the Help mailing list