"Pseudo frames" template

[steveeh131047]

This is my first attempt to post material that may be of use to forum members. I hope I'm doing the right things and that this is appropriate - if not, I'm sure one of the Dev Team will correct me

In an attempt to encourage members to move away from tables for their page layouts, and instead to use "content only" HTML with CSS, I'm posting this very simple pseudo_frames theme. It replicates the sort of layout that was achieved in the "bad old days" using Frames.

The html template simply groups {tokens} into a Header division, a Menu division, or a Content division. The template structure is very simple and you will see that it contains NO styling information.

The CSS style sheet then creates a fixed Header area, a fixed left-hand Menu area, and a fluid Content area - by "fixed" I mean that these areas are static in the browser window. To retain clarity I have separated the layout styling from the "cosmetic" styling. File "style.css" contains almost exclusively the styling needed for the layout; non-layout styling is achieved by "importing" a copy of the Classic theme stylesheet.

The required CSS would be much simpler if it were not for the very poor standards compliance of early versions of Internet Explorer. To get IE6 and earlier versions to render the layout correctly they have to be forced into "quirks mode" by the xml declaration at the very top of the html template, and a couple of "hacks" are needed in the CSS. The *html CSS commands are "hacks" that are ignored by compliant browsers but are followed by IE6 and its predecessors.

The layout rendering has been tested OK in IE6, IE7, IE8(Beta), and FF2 using a relatively simple set of Config options; but it may be that a different set of Config options "break" the layout in some way.

This is very much a "skeleton" theme for you to play with - I hope it gets you "hooked" on using CSS for layout and encourages you to experiment!

[Joachim Müller]

Thanks for your contribution - it is very welcome. There are some custom theme contributions (most of the ported Wordpress themes) that use a similar technology. I reviewed your theme and performed some slight quirks (mainly fixing the navigation column). The theme doesn't play nicely with the {CUSTOM_HEADER}: the height of the header area should not be set to a fixed width - that's a bad idea and you get the same problems as with regular frames.
You might want to take a look at how this is being done in the ported wordpress themes that I refered to above.

Please take a look at it and let me know your thoughts.

Cheers

Joachim

[steveeh131047]

Joachim,

Thanks for taking the trouble to look at the theme and for your helpful modifications.

I, too, like to use Unordered Lists for my navigation links, but I had no idea how to achieve it using cpg - now I do!

As you point out, there could be some difficulties with the fixed-height header if folk use {CUSTOM_HEADER} without care. I prefer to use CSS for generating header graphics etc (e.g. using css 'background:') and I tend to reserve {CUSTOM_HEADER} for running any 'up front' code which may be needed; but I guess others will use it quite differently. I would expect most folk to be using static content for the header block so it shouldn't be too difficult for them to work out what header height they need, and to modify the stylesheet accordingly.

I would be wary of allowing the header height to grow too much - with it and the nav panel fixed in position it's easy to leave very little space for content if someone is viewing at 800x600 or less. I did have one design where the header height and nav panel width were expressed in 'ems' to allow for sight-impaired visitors who would probably be using text expansion on their browser; but in the extreme, the content diappears!

I'm not familiar with Wordpress, but I'll take a look at the ported themes. All my sites have been "hand coded", using Notepad or Notepad++, because my son told me that was the best way for his Dad to learn !

My intention in posting the theme was simply to encourage others to move away from tables for layout wherever possible - I find it quite difficult to understand other folks' source HTML when the cpg gallery tables are embedded within many other nested layout tables; goodness knows what a disabled visitor using a screen reader would make of it all 

Thanks again for your helpful comments,

Steve

[Joachim Müller]

Moving the {CUSTOM_HEADER} out of the div container should do the trick. I'll test later.

[steveeh131047]

OK Joachim, thanks for that.

Although this was purely an exercise in CSS layout, I just applied some styling to the menu buttons to make them a bit more "interesting". Nothing else has changed - just some styling of the UL and LI items. Version1.2 attached.

Steve

[Pascal YAP]

Really, i like your job 
It's a new way for many new Themes !
By the way, you need a K+1 (karma) 

Great !

PYAP