Dizkus

Thanks Mark, I will have to investigate this as the footer was one of the issues holding me back from using this type of model with the traditional 3 column theme structure.

REgards
Lobos

--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment

Thanks Thevdo. I'm going to check these out right now.

Spire,

CSS is about far more than colors and fonts. CSS allows for full control over the positioning of elements within a page. An element may be a simple, singular tag (an image), a more complex structure (e.g. a form, a table) or a group of elements that serve a single purpose (a header, a news article).

Essentially we identify these elements on a page and apply styles to them. The more complex structures are identified as divisions of a page (the div tag). By identifying and tagging (using either the id or class attribute) each structural part of a page can be positioned with in the page.

All of this requires a basic, working knowegde of CSS so try this site.

For some specifics on CSS layouts the following sites are useful

http://glish.com/css/
http://www.csszengarden.com/
http://css.maxdesign.com.au/floatutorial/
http://www.alistapart.com/articles/negativemargins/
http://www.alistapart.com/articles/journey/
http://www.allmyfaqs.com/faq.pl?Tableless_layouts

Why CSS?

CSS breaks the link between the content and it's presentation. What does this mean? This means that the HTML page contains the logical markup of the content i.e. headings, paragraphs, images etc. But not where these should be positioned on a page.

For a really good example of this in practice see http://www.csszengar…/098/098.css&page=1, http://www.csszengarden.com/?cssfile=/101/101.css&page=1 and http://www.csszengar…/102/102.css&page=1. At first glance you'll see three very different pages... But take a closer look.... View the source of each page and you'll notice it's exactly the same page with different stylesheets applied. This is a really 'in your face' example of the seperation of content and presentation.

Why is this important?

1) Ease of modification - This is less important in the CMS arena since we're working with a database but the prinicpal here is important. If each page contains layout information then you have to update each and every page containing that layout.

As an example let's take a medium sized (100 pages say) handcoded site using a tables based setup. Now let's move one 'block' from the left column to the right. In order to do this we'll need to edit each page containing that 'block' of HTML code. In a CSS layout (as you've seen above) a simple stylesheet change can change the location of any 'block' of content on a page

2) Accessibilty - This is the biggest driver behind CSS based tableless layouts. You and I use a web browser to access our content from the web. This isn't the case for every user. There are many other user agents in use from mobile phones, pdas etc. but there are also a bunch of non-visual user agents e.g. screen readers that take our web content and serve it out in a completely different way to that of a standard browser.

An important factor in accessibility is ensuring that your site functions for these non-visual user agents in addition to the more traditional ones. Although screen readers are getting better and better they still struggle to understand the intent of table when it may of be used for layout or may have been used for content - how does a computer program distinguish the intent that you had when you designed your site.

The misinterpretation of tables (see 3) is one reason for doing away with them for accessibility sakes but there are others. Accessibility guidelines provide a recommended order for the placing of content on a page so that they perform optimially within the sreen reader enviroment - imagine that every piece of text in every left block you had being read back at your before you actually got to the content you where interested in on a page.

Now, as discussed already, CSS breaks the link between content and presentation so we can have the content rendered first in the HTML but laid out between the blocks for visual user agents. Table based layouts inherently tie the layout of the page to the order of content in the markup. So although someone said tables can be made accessible this isn't really true (there are differnet levels of accessiblity).

3) Semantically correct usage of markup elements - I'll sum up this one simply; a table is a table is a table, a list is a list is a list.... etc. To expand on this a little bit.. Each markup element should be used for the purpose for which is was designed i.e. tables should be used to represent tabular data. Lists should be used to present a list of items

Using markup elements for this purposes for which they're designed makes it easy to style the entire site, makes it easier for browers and other user agents to render the resultant markup and ensures that you get the best consistency across all user agents.

Why should we care?

If you know your target audience then you may not. If your only designing a site for a known set of people then you can design the site with them in mind. If this isn't the case then there are many reasons why you should care.

a) If your site is a business site can you afford to turn away customers simply because thier not accessing thier site via the user agent that you deem acceptable.
b) If your site is a public sector (goverment, education etc.) then you have a moral and ethical duty to provide access to content to ALL your citizens, students etc.

In fact there is legislature in a number of countries stipulating accessibilty requirements for goverment web sites so it's important to be aware of this. The most published being the American Rehabilitation Act Section 508.

Summary.

Sorry for the long post (but you asked). This gives you a basic intro to what CSS layouts are from a technical perspective and why thier an important part of modern web development

-Mark

It's something i've have been fighting with for a few months now as well. I could always get a design that looked ok as long as the center column was longer than the blocks otherwise the footer would 'tuck up' under the content and behind the blocks..... This article solves that nicely.

-Mark

Realy good links thevdo

As I spoke with a real good friend through email he had pointed out

as long we keep stiving to make CSS the main use for designing, the browsers will eventually be forced to comply.

I agree strongly with this, I think were headed in the right direction and we definitely have a force to push it with hahaha

--
_/_/_/_/_/
_/_/_/_/
_/_/_/
Thanks
Regards
MASsIVE
Theme Labs

Yes there is a lot more to CSS than just using it to format text - if you have a look at this site I am working on :

http://stopkillingchildren.com/ (please don't join for the moment)

And check out the navbar in the top left. This would not be possible without CSS, although it does need some javascript. In fact all these popup features are powered by the popup script I released a short while back.

This site is a mutation of CSS and tables and probably not the best way to do things - but as always I am a slave to formidable deadlines and thus have to quickly slap things together LOL :)

REgards

--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment

Mark,

Thanks for the help and the links. Yesterday afternoon, I took a few minutes and incorporated some extra CSS in one of the sites I am developing and was shocked at how easy it was to create a class and then define it.

Lobos,

I really like the dynamic look of your site. That menu on the top left is unique and certainly catches your eye. The page took a little bit of extra time to load though, just so you know. At first I thought the page was screwed up but it only half rendered and stuck there for about 5 seconds.

Intersting that this report would appear as I was considering the whole CSS thing. It's a report on a conversion of Microsoft's site from tables to CSS.



Very interesting

I love CSS!

That said, I need to add that, notwitstanding the (lack of) browser compatability issue, you still need to take care how you implement it. For example, that gamespot site mentioned earlier has four (4) external stylesheets which add up to almost 64000 bytes! That's almost 13 seconds downloading style sheets on a 56k modem! Granted none of us (well few of us) tolerate 56k modems, the rest of the world is pretty big and they'll never stick around at a site that seems to never load.

Again, I love CSS and the promise that tables will eventually "R.I.P." but, with 0.8 well behind schedule already, trying to eliminate tables would not be very high up on my list.

Slugger

Sluggar,

However remember that stylesheets can be cached so that's 13 seconds as a one time deal rather than tonnes of additional layout markup being downloaded at each page load. I'm sure that after a very small number of page views your in the positive in terms of bytes downloaded.

Also tables are pretty well eliminated already in .8x. The only place that tables are used outside of non tabular data is the themes that come with .75 (xanthia versions) and Xanthia itself. As soon as .750 is out of the door i've got the tableless versions of PostNuke and PiterPan ready to go.

-Mark

True, but add in HTML, scripts, images, etc. and that first page with a ton of big files can be a mighty big hurdle for slow connections. I've given up on slow loading sites and I suspect I'm not the only one. IMHO, fast is better.

Slugger

There are already some near table-less themes out there - Minimalist comes to mind as one, however I have found that PostNuke isn't the drama it's more the Modules and Blocks which are overladen with nested tables, nest tables, nested tables they sort of make a mockery of CSS based themes.

Cheers
Namtrak

PostNuke .750 will have at least some cleanups (e.g. within weblinks and downloads module)...

--
regards from germany
..::[Zikula Application Framework]::.. ..::[SEO-Blog]::.. ..::[CMS Sicherheit]::..

Also a lot of the modules use the PHP-nuke style opentable/closetable functions so if you change these over to styled divs then you can reduce tables substantially via a theme update.

-Mark

Lars, I was probably more thinking of the 3rd party mods etc, which I guess may mean the module/block development guides could probably do with an update post .8 release.