[UPHPU] CSS Help Part deux

[Sheri Bigelow]

On 8/18/06, Smith, Jeff <Jeff.Smith at hollycorp.com> wrote:
> Ok, I want to expand on the previous question.  I want to write the HTML
> so the layout can be completely (or as much as possible) controlled via
> CSS.  Basically I want to separate logic from presentation as much as
> possible.  I have more details (pictures, solutions so far, etc) at
> http://www.arcanatower.com/cssQuestions/ .  I don't even know if it is
> possible.  Thanks.

Great question. Commendable web standards goal. (Woot, woot!) I also want a
css layout that separates logic from presentation.. and there are a few
popular solutions (below) out there... my trouble is just figuring out WHICH
ONE to use! (Comments? Wade?)

On 8/18/06, Tyler Gee <geekout at gmail.com> wrote:
> Check out http://www.alistapart.com, specifically
> http://www.alistapart.com/topics/code/css/
> and
> http://www.alistapart.com/articles/separationdilemma

Particularly, the article "In Search of the Holy
Grail<http://www.alistapart.com/articles/holygrail>"
[1] on alisapart.com picks apart a lot of the current popular css layouts.
They mention positioniseverything.net's One True
Layout<http://www.alistapart.com/articles/holygrail>[2] including
using their equal-height columns method. This
page<http://www.positioniseverything.net/articles/onetruelayout/equalheight>[3]
makes some decent arguments against the faux column approach, which
uses
repeat-y background images to fill in color for the columns. BUT, here are
the problems with the Equal Height Columns
method<http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems>[4]
from
positioniseverything.net.

[1] - http://www.alistapart.com/articles/holygrail
[2] - http://www.positioniseverything.net/articles/onetruelayout/
[3] - http://www.positioniseverything.net/articles/onetruelayout/equalheight
[4] -
http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems

On 8/18/06, Wade Preston Shearer <lists at wadeshearer.com> wrote:
> Note: Your requirement that your columns be the same height is not
> possible to achieve currently with CSS alone. I say currently because
> the future CSS spec allows for columns such as this but our browsers
> do not support it yet. So, in the mean time, you have to implement
> something else to control the height. One way to to this is with
> javascript. My solution is a teenie, tiny image that repeats. I think
> the image approach is better than the javascript approach.

Okay, now, I thought the same thing too, but see if you can help me pick
apart this three column layout by Stu Nicholls at
CSSplay.co.uk<http://www.cssplay.co.uk/layouts/threecol.html>.
[5] Here is a direct link to Stu's three column layout example in
action<http://www.cssplay.co.uk/layouts/3cols.html>.
[6] Brilliant. K, so, there must be a downside to this layout... mustn't
there? What is it?

[5] - http://www.cssplay.co.uk/layouts/threecol.html
[6] - http://www.cssplay.co.uk/layouts/3cols.html

And, finally, I ran into this rather lovely free sample chapter about css
layout (pdf) <http://www.cssmastery.com/CSSMastery-Chapter7.pdf> [7] in a
book called CSS Mastery <http://www.cssmastery.com/> [8], which I highly
recommend btw. The sample chapter talks about a fixed-width, three-column,
float-based layout that seems pretty good. Their solution to the equal
column height issue involves faux columns (fake columns are created by
applying a repeating background image to an element that does span the full
height of the layout). The float-based layout ideas are followed by a break
down of fixed-width vs. liquid vs. elastic layouts, and I am leaning toward
using the elastic-liquid hybrid method--which is setting width in ems and
max-width in percentages (standards-compliant browsers for only for the
max-width of course).

[7] - http://www.cssmastery.com/CSSMastery-Chapter7.pdf
[8] - http://www.cssmastery.com/

On 8/18/06, Eric Goebel <ericgoebel at gmail.com> wrote:
> In firefox there's a great extesion called web developer.

True that! If you don't have it... you must get it.
https://addons.mozilla.org/firefox/60/

K then, last point, I would like to pose the question of "proper" source
ordering--meaning (some say) the center, or main, column should come first
in the markup so as to appease search engine aficionados. HOWEVER, I have
heard recent arguments against this so-called proper source ordering saying
that it's a far less accessibility-friendly solution (read: screen reader
gets there and the nav is stuck way at the bottom if main content is first).
Are "skip to navigation" links the answer? I'm a bit torn because, well,
don't search engines want links (i.e. put nav first in source order), but
don't they also want quality, relevant content (i.e. put main content first
in source order)? I suppose if I were to decide right now, then I would put
the order as title, main nav, main content, side columns, secondary nav,
footer. Would you sacrifice a bit of accessibility for a possible boost in
your search engine rank position? In that case, I would put title/main
content first and make sure to include keyword rich link text near the top
of the page.

Here's an example of a page I worked on with source ordering of content
first, nav last. If you have the web developer tool bar installed, press
Ctrl+Shift+S to see the page without its stylesheet. I know it has a bit of
trouble with NN7, but that accounts for a VERY small fraction of a
percentage of this site's traffic... any constructive criticism is welcome.
http://www.myriadtests.com/inherited.htm

P.S. Sorry for the excruciatingly long email, but I've been thinking about
this topic for a while. Thanks to anyone who actually reads the whole darn
thing through!  ;)