What is source ordering?

What is source ordering?

I’m starting to really like the idea of this concept. But it looks like I’m missing a few details here.

execution -- I don’t understand why java and what not at the top of a page(template) doesn’t goo up this concept?

and such ??

Is it being done here at Modx?

source ordering can really only be done with css. It is the method by which all your content is at he top of the page and therefor easier for the bots to find. It is also very user friendly for those who have issues seeing properly since they can get right to the content instead of having to wade through a miriad of links first.

I have quite a few experimental themes on my site using source ordering but be forwarned look at them with mozilla to see how perty they are. You can easily use source ordering with ie if you want to but you will not be able ot have any kind of fancyness as ie, sourceordering and graphics dont get along well. I may try other versions of this later and try to work out the ie issues.

http://www.liquidthemes.com/theme-testing/liquid-templates/koobrick-3-column.web
http://www.liquidthemes.com/theme-testing/liquid-templates/koobrick-2-column-left.web
http://www.liquidthemes.com/theme-testing/liquid-templates/koobrick-2-column-right.web
http://www.liquidthemes.com/theme-testing/liquid-templates/sunset-down-3-column.web

the last one I did have working fairly well in ie untill I went to source ordering for it. so ie can get along well with some things although it never looked as nice as it does in mozilla or konqueror/saffari

sunset template

Yeah, I saw that. Very impressive. Especially the background.

However, the header font is hard to see and read. The colors are too close to differenciate.

I read about the source ordering on site and it really made sense. However, the techinical side was raising some questions because of probably rendering timing. which is still a bit of voodo mystery for me

Besides screen readers and those who don’t have CSS support in their browsers, a big advantage to this is that Google and other search engines only take a certain amount of text from your source for their description, and having a menu show up first isn’t really desirable in your search engine results. So having your actual content first in your source is a good thing.

There are a couple of ways of doing this, but probably the most predictable and stable is a brute-force CSS position:absolute placement of some of your <div>s.

http://bluerobot.com/web/layouts/layout1.html

Here’s a trickier floated version:

http://www.positioniseverything.net/ordered-floats.html

Here’s a couple of great sites for table-less design (among many):

http://www.meyerweb.com/eric/css/edge/
http://www.glish.com/css/

This one is probably the best of the source ordered layouts, though it’s a challenge to use at first- The Jello Mold Piefecta

You know all of this css technique are good but I am running into a little problem with css that I have not yet figure out a way to get it working for me.

Perhaps you guys can provide some insight.

I design a column layout using strictly css and div. Everything is working just fine but when I start to apply the content and have a long menu tree which will cover the footer when it is extended.

I am not able to get the footer float downward to avoid being cover by the menu.

Do you have any suggestion on how to get around this problem?

Thanks

Floating items takes them out of the document flow. Therefore according to CSS, they have no real height.

Easiest solution: put a <br style="clear:both" /> after your long menu.

Ryan,

I tried that that way you suggested and I even tried to put the "clear:both" in the css for the "footer" class but my long menu still cover up my footer.

This is really driving me nut!

Have a link for the problem page?

The only way I can get it to replicate your problem is if one of the containers containing your menu has a "height" style set. Otherwise, the footer always drops to accomodate the visible menu.