Example phpwcms site using a CSS layout?

[marco]

Could somebody post a phpwcms site where they used CSS instead of tables for layout?

I find it a lot easier to use tables for layout but I would be interested to know if somebody used a CSS layout with phpwcms and what they may have learned in the process, or how does it compare with the table based layouts?

[rk]

http://www.idz-hannover.de

there are not all contentparts modified at the moment. But i hope the most i used there . I used a sample from csszengarden and have many things modified.


http://www.magicpages.de

only testpage at the moment.


Use firefox and webdeveloper to view the pages and use "outline blocklevel elements" and "information display id&class details". Then it is easy to see the page structure.

[marco]

Thank you rk, very nice! I take it you pasted the entire CSS layout in the "content" column in phpwcms (plus the right replacement tags)?

[rk]

You are right (CSS layout in the "content" column).

And i made many changes in conf.template_default.inc.php.

I think the most important thing is to use standard-tags for every page part if possible.

I change the most ...heading... to <h1>...<h6>, standard-text (content_...) to <p>, and so on. I don't use ..._class-definitions in the conf.template... .

On this way it is possible to view the pages for example with a textbrowser or to make Web content accessible to people with disabilities.

[marco]

And i made many changes in conf.template_default.inc.php.

Did you have to make those changes to make the CSS layout work with phpwcms or only to alter the presentation style?

I am trying to determine if I should stick with a table-based layout
which would be the natural choice for phpwcms, or try and do a CSS-based layout.

[rk]

I am trying to determine if I should stick with a table-based layout
which would be the natural choice for phpwcms, or try and do a CSS-based layout.

See it on this way:

• frames are very old
  tables are old
  CSS is the future

And there are many reasons to do it with CSS. I have only german links to make a good case for "make Web content accessible to people with disabilities" but i think there are many english pages too.


Another CSS-Sample could you find here http://www.magicpages.de/aura/. A "very quick hack", somebody here ask if it is possible to use that sample-layout.

Did you have to make those changes to make the CSS layout work with phpwcms or only to alter the presentation style?

No, you can use a CSS-Layout without changes in the conf....

It is only necessary to put the "layout-divs" (header, menu, content, footer, ...) in the frontend.css.

You could use http://www.inknoise.com/experimental/layoutomatic.php to generate a CSS-Layout. Insert the definitions in your frontend.css and modify pagesource in content-column with {NAV_ROW}, {CONTENT} and some more and your first css-page works .

[marco]

Oh, I've read all the pros on why use CSS; I found though that only using a single table for the overall page structure and CSS everywhere else is saving me a lot of headaches.

So far I see that I end up using a lot more hacks to make CSS layouts work while using single layout table allows me to have borders, header, footer, columns and backgrounds where I want them, colored as I want them, and consistent across browsers.

Yet, there are more and more people asking for CSS-only layouts and semantically correct sites, so I keep trying, but CSS keeps me on my toes - there is always that nasty IE bug or some other browser quirk...

Thanks for the feedback!

[rk]

..., but CSS keeps me on my toes - there is always that nasty IE bug or some other browser quirk...

Yes, that are the main problems. Here some more pixels, there a absolutley different position .

Tables don't made so many browser-probs .

[marco]

I had seen before the "Aura" template but now I can see that it uses phpwcms (view page source) and there is not a table anywhere; interesting!

I am also familiar with the Inknoise layoutomatic and used it myself; it is quite handy.

Thanks again for the good pointers and feedback.

[psych0]

Hey,

I'm interested in trying out phpwcms... and my main question is that I hate using tables in my web design... look at http://www.urbanplexus.net for an example of what sort of thing I'm looking for... in terms of what I'm looking for wordpress is perfect, but it is not more than a blog... basically it has XHTML + CSS out of the box...

Do I need to do a lot of tweaking/hacking to get phpwcms to such a state where anything I post is fully non-table based?

[rk]

I think it is possible.

Your left col seems to be "static". For the left col you could use your code without changes.

So the main work would be the content col.
Some changes to standard <h1>..., <p> and so on, modify the frontend.css and than i think the most things work.

[Kosse]

I am working on something with CSS as well...
The work is still in progress, so changes can (will) appear.
You can check at:

Demo: http://www.piezo.be

Will try to add some doc when work is done (made changes in the php conf and tmpl and... a lot actually)

I thought off using both functionnality of PHPWCMS and at the same time use the CONTENT column as well as the others (header, footer, etc...) helps to have a nice stuctured thing afterwards and use all the functionnalities of PHPWCMS (i.e. in the content part I only added {content} ).

Any comments welcome

[marco]

Would love to see it but the site never shows up;
sloooow host?

[rk]

Would love to see it but the site never shows up;
sloooow host?

I think he had a large flash intro.

I don't have the plugin , so i could see the pages. But without something on the left side. I hope thats not the navigation

[marco]

Nope; the connection times out;
there is no indication that Flash is loading.