Jeremy Smith's blog

Entry Is Labelled

CSS-ing Case Round 7: Proper Source Order

<DISCLAIMER>

Do not use the markup and CSS found in this post in any official way associated with Case Western Reserve University. These are not official; not endorsed by ITS (my employer, as is the University in general); and not endorsed by University Marketing & Communications. These are all experimental and are being shown for learning purposes only. Again, do not use them. They were created by someone who is most definitely not a professional web designer. As a matter of fact, small animals may have been harmed in the making of these templates; they are not FDA approved; and no oversight committee was employed to guarantee the sanity of this endeavor. If you are looking for templates to create your Case Western affiliated web site, you should be over at the Web Toolkit and not here.

</DISCLAIMER>

Round 7 (Still got a lot of pixel pushing to do to get perfection, but the basics are there.)

In the last entry, The Lull, I talked about using "proper source order"; that is, the <div id="content"> should come before the <div id="left_side_box"> and <div id="right_side_box"> sections. As Paul Jarc pointed out, it makes it easier on users of text-based browsers. It also puts the content right up front so accessibility amongst screen readers is better. Plus, it just makes more logical sense, is more "semantic" (for various definitions), and gosh-darnnit it's the right way to do it.

I referred back to the In Search of the Holy Grail done by A List Apart, more specifically, Example #4, which didn't use any extraneous div's unlike Example #2, which wrapped a div around the 3 columns.

Well, I did initially adapt Example #4, which, in the article, is described as:

The extremists out there might be wondering to themselves whether there’s not an even better way to do this. After all, the method I’ve illustrated introduces a non-semantic container div. Surely we can’t have one extra div cluttering up our otherwise flawless markup.

Here it is: Round 6.9

After having finished it, though, I went back and adapted Example #2, instead. Why? It's a tradeoff. The complexity of the CSS using the #4 template was a bit heavy. I can live with the one extra wrapper div if it eases up considerably on the complexity of the CSS rules. Plus, I didn't even get to the part with #4 on doing the whole "if the left side box isn't there, shift the content area over, same with the right side box, and moving the content and boxes up if the navbar or headline area is gone, etc." That would have been a major headache.

Okay, so now that div id="content" comes before the boxes, our markup is all ordered just right, and we're almost back on track. I need to do some cleaning up, pixel pushing, and IE fixin' for Round #8; and we should be ready to finish everything up in rounds 10 and 11.

Feedback appreciated.

Comments