[html5] Content Ordering

Thu Jun 16 07:58:12 PDT 2011

Excellent advice. Thanks everyone for the quick and intelligent responses.

Cassini

________________________________
From: Nathan Ziarek [nziarek at gmail.com]
Sent: Wednesday, June 15, 2011 6:07 PM
To: Jordan Dobson
Cc: Nazir, Cassini; help at lists.whatwg.org
Subject: Re: [html5] Content Ordering

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<mailto: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<mailto:Help at lists.whatwg.org>
http://lists.whatwg.org/listinfo.cgi/help-whatwg.org
_______________________________________________
Help mailing list
Help at lists.whatwg.org<mailto:Help at lists.whatwg.org>
http://lists.whatwg.org/listinfo.cgi/help-whatwg.org