Going tableless - EE CSS example

[Taligent]

Hi folks,

Just wanted to share a few of the things a demented mind could do to EE...

During a site-wide redesign I switched from table-based layout to positioning and styling with CSS only - it's made maintenance easier, as the HTML coding becomes simple to work with. No more endless trees of tables to dig through.

I included EE in the switchover primarily for this flexibility. I stripped styling from the code so EE on it's own only generates actual content, and added id and class tags to the content to allow styling from a stylesheet (making later modifications or redesigns easier). Only the stylesheet needs to be changed, as effectively demonstrated at CSS Zen Garden (http://www.csszengarden.com). I also liked that content can now wrap around floated elements easily - this is handy for the index pages, where I have a navigation menu intruding into the area where EE generates the exhibition listing.

http://www.taligentx.com/photos/

Excuse the mundane photos (still need to scan in some of the less boring stuff).

It even comes close to validating, but I'm not a zealot when it comes to producing perfectly compliant code. There's even a table (gasp!) in the code that wraps around the main photo displayed to allow for easy centering (this normally isn't necessary, but the drop shadow setup makes it difficult to simply setup an element with margin: auto).

I'm definitely looking forward to the next release of EE, as this should all be possible without directly modifying EE's coding - thanks to templates.

On another note, a public "latest comments" feature isn't hard to implement with EE 1.5RC4. I made a copy of EDITOR_comments_and_ratings.php and gutted most of the code to simply output the latest comments.

Example: http://www.taligentx.com/photos/latestcomments.php
Code: http://www.taligentx.com/photos/latestcomments.txt

The code is just for reference - it won't work on a default EE 1.5RC4 installation as I'm using a customized header/footer system.

I also modified (butchered?) another copy of EE to serve as a complement to a car maintenance section of the site, in stripped down form.

Example: http://www.taligentx.com/passat/maintenance/atfchange/

I like EE. :)

Thanks Pekka!

-Nikhil

[Pekka]

Very good Nikhil! I'll add your to test group :)

I have had CSS positioning in mind when doing the template material in next release, but all that will need to be tested by people like you who can do nice layouts with CSS. Especially the index page has plenty of new material blocks you can use because the structure is (or may be) nested (groups in groups and exhibitions in groups, dropdown UL menus, group flow displays...).

In next EE the "latestcomment" code will be quite different as everything is tied to user permissions and few cache arrays built for that user. But I'll do that code for you.

[Darter]

Hey Nikhil! I thought I recognized your screen name, but had to check out your site to be sure. Do you still frequent cb5 (or pw, as it's called now)? I remember that you were the first to fully document a diy atf change and reading about your "wall" episode, and it's good to see you still have your replacement.

I started down the CSS path as well, but only got as far as the gallery index page. I didn't do much styling yet, but had to get rid of all of those tables (no offence Pekka, I did table layout myself until recently). I think the challenge presented itself since I only have a few accessible designs under my belt so far, plus I wanted to dive in and learn more about php.

The CSS Zen Garden is a great place to go for creative inspiration. Not too many of the designs there really do it for me, but every one of them has elements that pop out and give me a launching point for my next project: color pallette, layout, theme...etc.

Anway, great work on your design! I like the nav buttons in place of the nav text in the lower right. It's a little more tangible. Also, what did you do for the breadcrumbs? I'm sure all the relevant data is there, so it shouldn't be too hard for me to add on my site.

Good to see you here!

Bob