After a week of not looking at the css-xhtml tutorial, took a couple hours playing around with it taking into consideration some points made by some of the developers on the mailing list I presented it to for critique.
The writing itself was destined to be tweaked anyways, and one comment was to explain a bit more of the *why* something got done the way it’s done. A gut feeling, that most people trying to learn CSS are having the hardest time with the positioning of elements and the why is more related to float, padding and margin issues rather than how to get the hover colors and font-sizes etc., so am expanding on that issue for sure.
Not sure if it’s obvious to most how selectors cascade, but that’s basically an easy list to memorize for anyone that wants to learn it and haven’t touched that at all, and the gist of another comment. This time I was merrily going along with the commenter’s example of where I “missed” a chance to use same, and actually dropped some extra divs altogether instead. The css file itself is starting to get almost tiny, that’s pretty cool.
The most worrisome comment to me, was that I missed how the site was going to react when someone came along and bumped up the text size. Putting the thing together Saturday afternoon a week ago, I hit the Ctrl + just once to increase the text 100% and it was looking like things were going to hang in there and left it at that. I also used pixels to size the text, thinking that it would be better to stick as close as possible to the original example.
Problem is, this little project in the end should be *better* than the sample. It already is with what was done last Saturday, version one easily met the criteria of having half to two-thirds less number of files and bytes to download, and version two is of course a wee bit better.
The original example in it’s tabular glory “broke” it’s layout on the first text size increase, nothing unusual with the type of sliced table that it is. The technology at the time the mark-up methods used in the example simply didn’t take into account that now people do a Ctrl +, and Bob’s yer Uncle, bigger text to read. The css ver.1 from last week survived a one size up increase as mentioned, but going one more bump and things went all berserk as things are wont to do when floats get pushed out of their normal flow.
So, with ver.2 able to handle two text size increases now, (that’s pretty big:-) that’s a good enough improvement over the original to not go any further with that. I almost always use ems for font sizes everywhere else, but didn’t in ver.1 again mistakenly sticking to the original, and the new version is ems to keep that crowd happy, another improvement over the original. A bit of writing to do in the morning to update the actual tute and a tweak the screen-shots reflecting the changes I made to the background images and we’ll see how it goes.
In the end, although it would seem that it’s been proved that you can do any graphic intensive web site of this design style in css and xhtml, there’s no substitute for graphic design that lends itself to a fluid web site. The nature of the example’s design itself is a fixed pixel precision layout, and sans re-doing the design to create more fluidity which would be a whole ‘nuther exercise and not what we want to demonstrate, it’s greatly improved over the example both in file sizes and numbers, it’s semantic qualities, and all the other nice things you can say about css and xhtml. So, better stop writing this blog and get to updating that tute, and figuring out how much to charge to do it for other people…