Everything is most DIV based except tpl_main_page. Why?

[qhome]

The only real <table> structure you guys kept with the new template design is the main structure of the tpl_main_page.php file. Is there a reason that this is still table based? Aside from the obvious ease of <table> tags that we all learned when the web first came out, I think the standard is moving far and fast from tables because of their limitations and their weaknesses.

For kicks, I redesigned the Classic template using DIV tags in place of the table/tr/td tags. It took very few changes to the stylesheet and tpl_main_page.php and was quite simple.

I also made sure to keep the global settings and overrides so that it uses the correct width for the main content area if the right or left columns were disabled, and still uses the overrides in the admin area to make the width of navColumnOne and Two wider or thinner based on the inline style tag override.

Benefits of full CSS based design:

• Div blocks load faster. They load one by one whereas Table has to load everything before displaying the contents. Large tables = sloow delays, even with optimized images.
• Remove limitations on design
• Not stuck to basic 2 or 3-column structures
• Layout can be completely redesigned via CSS files alone
• DIV Blocks can be positioned anywhere giving extreme design possibilities
• No more left column right column mindset, now you can move columns where you want them and how you want them.
• DIV Blocks can work with Javascript for hiding and showing information dynamically.
• DIV Blocks can be floated to quickly change sides.
• DIV Blocks and positioning are cross-browser supported (occasional IE hack needed but thats to be expected and easily done.)
• DIV Blocks can size well with pages and create liquid or fixed layouts.

I realize that zen-cart does indeed allow you to easily make your own template and override the default tpl_main_page.php file, but if there is no good reason to use the table for the main structure, I would suggest that future ZC releases are done with a template_default version of the tpl_main_page.php that uses DIV tags and remove the tables all together.

The caveat would be for people looking to upgrade would need to be sure they use the current tpl_main_page.php file as an override in their own template folder so that when the new one is used, they can take their time to port it to div based.

The main goal would be to see some more creatively designed sites and templates out there, as many of them tend to stick with the outer table structure, potentially limiting their creativity.

[kobra]

I think that you actually answered your own question as you see this as transitional and what I suspect as the reason for retaining the basic table structure. You also know that you can and have re-designed around this and also realize that now with all div's if you perfom a change with an error this is not contained say in the left side alone but could drive the whole site to be a mess. From a troubleshooting perspective, keeping these things within a confined space assists in locating the problem.. JMO

I think that possibly future releases might move in this direction?? But why don't you contribute a fully div based generic template and see what the reception and problems are?

[qhome]

I think that you actually answered your own question as you see this as transitional and what I suspect as the reason for retaining the basic table structure. You also know that you can and have re-designed around this and also realize that now with all div's if you perfom a change with an error this is not contained say in the left side alone but could drive the whole site to be a mess. From a troubleshooting perspective, keeping these things within a confined space assists in locating the problem.. JMO

I think that possibly future releases might move in this direction?? But why don't you contribute a fully div based generic template and see what the reception and problems are?

Well I think that can be said with any layout. Sure Tables keep a basic order of things, but could easily be broken if you forget a closing tag somewhere.

DIVs also hold their own basic fundamentals in a normal chronological top-to-bottom structure. Plus most of the rest of zen-cart is already contained in nested DIVs so you really only have navColumnOne, MainColumn, and navColumnTwo. The table itself only wraps around these existing "parent" divs. So they already stay in a decent column based order.

But Divs allow forced positioning of these child divs to put them anywhere if you want, or just fall in normal top-to-bottom order. Divs just allow the extra possibilities making them more dynamic. You could swap Left Column and right column, or put left and right next to eachother and have main column on the end, or put main column beneath left/right column.. all with a few simple css changes, but not possible with the current table structure. unless you change code everytime.

[kobra]

No argument here...I prefer the "Mostly" div based cart to the nested table version. And yes a move to a fully semantical base is fully possible. The dev's move from table to div was a MAJOR departure for Zen Cart and much of their installed base and I suspect that this current scheme is transitional.

[qhome]

OK, I've got a fully div based port of the classic template done:

http://unbannable.com/zen137/

I've kept all of the page validation intact and tested it with Opera, FF, and IE7. It also passes wc3 validation.

I've also kept the "Admin->Configuration->Layout Settings" overrides as well.

I have tested it with right column disabled, left column disabled, and both columns disabled. All look great.

I want to run a few more tests and optimize some code and it should be ready for release.

After which, I have some css-based changes to this fully div template that I plan to demonstrate for some new templates.

[kobra]

qhome,

Looks like a an excellent start...When you say "Fully div based" are you meaning 100% semantical? If so, look at the product listing page (and others). Otherwise, Nice beginnings.

[qhome]

qhome,

Looks like a an excellent start...When you say "Fully div based" are you meaning 100&#37; semantical? If so, look at the product listing page (and others). Otherwise, Nice beginnings.

Well I was mainly looking at just the main_page structure for the proof of concept.. currently because ZC is very "boxy" it can be structurally identical internally of each box whether the page is made of divs or tables... but technically yes the product listing pages and even the "upcoming products" area should be changed. I should probably be more wary of using "fully"

[Kim]

Product listings and the upcoming products are tabular data - why would you want to remove the table that holds them?

[qhome]

Product listings and the upcoming products are tabular data - why would you want to remove the table that holds them?

There is no "real" reason.. It was just proof of concept but since there is no need to move sections of that table around, it is not a necessary change and you are right tabular data would be a bit more work to line it all up as well.

Everything within its own block can be whatever it likes to be. As far as semantics, tables aren't necessarily against the rules.. there are many other "divits" in zen-cart already like navColumnWrappers and stuff that are a bit unnecessary that would probably be better to nix as opposed to spending time converting those two modules to make it more semantic.

[Kim]

there is no need to move sections of that table around

Actually, sometimes there is a need and and it can be accomplished via the admin and the table is assembled dynamically according to the sort order set there.