- Build the HTML document in a content-importance order. Main content first, navigation and secondary elements later.
This is a matter of preference there is a school of coding hat believe the content comes first , and in order of importance and finally the nav, and another school that believes the nav should be first ( after all how can you get to where you are going… especially in a large site)… yet another that actually orders it by need of presentations ( since floated items must always be at the top of their containers code).
Personally… I write the code W/O or images first… does it make sense that way? Only then do I figure how to style it.
There are some basic and rather frustrating limitations to to CSS. I would list the main 2 as : equal height elements and arranging order of content. There are some faux methods you can use to compensate for the previous, all of which have their strengths and trade off. This is why you may notice that lot of the people on the forum who know their stuff, need to see your HTML mark up and what specifically you are tying to do in order to answer your question. The way you make a 3equal-height column site differs from how you would attempt a 5 equal-height column site ( and some might just ask why do you even want 5 colum)
As for the latter—content arrangement. Horizontally switching aliment is easy with CSS, its vertical that CAN be a problem… especially since you are bound to have dynamic heights at some point.
Lets starts simple, if somewhat unrealistic. if you KNEW the size of all of your elements you could use AP to place them anyway you wanted them, regardless of where they were on the source order. you would also be wise to give the element that contains your page a defined width and height equal to the total width and height of all your elements…but in real life situation you may NEVER encounter a page where the content is so static or even predictable that you can know the “total” size of it. And this calcs would be rather convoluted and would have to be done for EVERY page … which is kind of counters the point of a SITE WIDE style sheet… none the less that is ONE WAY it CAN be done (not that it ever SHOULD be done)
Horizontal. If you have two elements in the mark up.
<div class=“el1”>bah</div>
<div class=“el2”>bah</div>
you can float them both ( let’s say float:left;) and use margins ( and widths) to switch their position.
So .el2 would have a margin-left:-100%, and .el1 would have a margin-left: (width of el2);
( yeah you could have also floated on to the right, but I am trying to explain the principle behind how horizontal switching is done). Alternately, you could use relative positioning instead of margins.
Vertical switching is another challenge all together. Vertical margins are calculated based on the WIDTH of the container not the height. Thats one problem, the other problem floats cannot be displayed ABOVE other floats previous in the source code.
this means the only way you can use margins or relative pos. to vertically switch elements with css is IF YOU KNOW their height explicitly , preferably in px or or MATCHED ems.
so something like this:
.e1{ height:100px; position:relative; top:200px;}
.e2{ height:200px;position:relative; top:-100px;}
the problem is that the number of case where you you know the height of an element is very limited, and in itself risky ( what if you define a height to contain your content, but the user chooses to make the font-size bigger?)
Enter CSS3 this is not widely supported or even approved yet… but CSS3 actually allows you to switch the order… the flex-box model makes a lot of strides towards being able to switch the display order of your code… http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
but we may have to wait a while until its supported my MOST UAs