Kim:
:unsure: I am confused - you have removed the 1 layout table but added tables for the center boxes that were all div based?
lol Do as I say! Not as I do!
Actually the center boxes is a separate contrib that I started making before I learned of the alleged preferred use of divs over tables.
It's a long learning story.
Day 1: I first had an idea to make the center boxes table based so i could put those nice dividers in between each one. At this point I didnt know much about divs and tables other than that Zen-cart used mostly divs and they were harder to deal with than tables.
Day 2: I started re-writing them to use tables. I got them looking nice and had the lines where i wanted them and had some inventive php coding in place :)
Day 3: I start reading about sites that are created using div's only. I read Divs are better than tables because a table has to load all the internal content before the table will load, whereas divs can load block by block.
Day 4: Now i have the notion that Divs are the next best thing since sliced bread and I break off in a tangent to see how to make my store look like some of the amazing looking css/div based sites.
Day 5: I find that the structure of the store uses a Table.. which according to my day 3 learning, I get all huffy and puffy about how they should be div columns and not tables cuz they load faster. Also my Day 4 learning won't work until they are divs.
Day 6: I begin rewriting the classic green template using div columns instead of tables. I quickly find that 2- column div layouts can be easily accomplished with absolute positioning.. but 3 column is quite difficult.
Day 7: I figure out a way to do it with some online research... At this point I use absolute position on the left and right columns.. and leave the center liquid. I think Im the king of the day until I see that the footer underlaps the side boxes if the centercolumn is shorter than the two side columns. This is because absolute positioning is static and the rest of the page moves without regard to them.
Day 8: Now I read that absolute positioning is frowned upon. Float is the way to go. So i float the left and middle ... tried working with 2 column layout first as it was easier. But instead Float had another problem: <br clear:both>. this html markup will go past all floats on the page... not just the ones in the parent div tag. So i would get large gaps on my center area because it was trying to find the end of the floating left column.
Day 9: Back to the drawing board. I find that floating ALL 3 columns would prevent <br clear:both> from shifting AND would play nice with other boxes on the page. So I begin using a 3 float design and it works good!
Day 10. I complete my float based rewrite of the classic green and it looks good. But then I read that just because you are div based doesn't mean its perfect or even necessary. Then I got into learning semantics and finding that a lot of sites suffer from "divititis" whereby they use too many embedded div tags that aren't necessary.
Day 11. I start making my own template using the div column structure. It looks ok but I find it very hard to keep looking up the css with FF web developer and finding where that is in the css file and making sure the child divs have transparent color so that they can be seen through. It was mind-numbing. Then I wondered why there were so many divs to begin with. Ever main container also has a wrapper.. which is contained by another div... so then i figured.. well perhaps I need to cut down on some of the extra divs
Day 12. I find out that just cuz i did a few days of research and learning my "know-it-all" methods were a bit presumptious and it's not such a bad thing to have "some" tables within a confined area, but still separated from other block level elements. BUT, I still find it to be wiser to use a div base for the main structure so it can be moved around easier to make more creative designs. So thats why i titled the template a "Non-Table Based Structure" because it is div based structure. The tabled are limited to inside div/block level elements.
Day 13: I revamp my design, removing all the "wrapper" divs, and some of the extra header divs. For example there is
#navColumnOne
--#navColumnOneWrapper
----.columnLeft
------.leftBox
--------.leftBoxContainer
----------.leftBoxHeading
------------.leftBoxContents
--------------.sideBoxContainer
And after my lobodomy, I went and cleaned it up to:
#navColumnOne
--.columnLeft
----.leftBoxContainer
----h2 (replaced heading div)
------.sideBoxContainer
which could still probably be done better or differently to be more semantic. Thsi resulted in a lot more file editing than I planned but overall I found it much easier to design.
The CSS file was also IMO a disaster but I guess was done that way to keep it smaller but putting ambiguous tags all over the places that share similar css qualities. Things like:
#logo, .centerBoxContents, .specialsListBoxContents,
.categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}
/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents,
.additionalImages, .centerBoxContentsSpecials,
.centerBoxContentsAlsoPurch, .centerBoxContentsFeatured,
.centerBoxContentsNew, .alert {
vertical-align: top;
}
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents,
.additionalImages, .centerBoxContentsSpecials,
.centerBoxContentsAlsoPurch, .centerBoxContentsFeatured,
.centerBoxContentsNew {
margin: 1em 0em;
}
Making it damn near impossible to follow. So currently my css file is double size.. because I went and began rewriting it based on location of the class/id and if I need to repeat a few here or there.. i'd rather do that and keep it easier to read vs optimizing 2k on a simple textfile. I doubt that would slow down a 28.8k modem any more than 500ms. I'm working on that today to slim it down and remove a lot of the calls to divs I removed.
So there may be some debate on whats better.. easy to read or optimized and jumbled, and table vs divs, etc.
The template does have some limitations at this point. It does have to be a "fixed" width layout as floats will only line up against other floats. But I did find a way to make it liquid both by using css methods or I could use javascript. But really liquid isn't all that useful when dealing with sized content that you want your user to see full blown.. and that is typically the case in a store. Most ecommerce stores i find online to be fixed.
But! with php, I did leave the admin column overrides for right and left column width and global enable/disable of the column. When the php sees a column disabled it loads a different class file for that option so that the middle column can stretch out and overtake that disabled columns space without having to make code or css changes.. so it is somewhat of a hybrid on page load.
So the lesson learned was that Div structure is probably the best solution but inner div table based data is also okay. And optimized CSS might load a half sec faster, but in the long run will confuse the world. :)
