Silverfish -- Non-Table Based Structure Template

[qhome]

After learning some webdesign tips I found it is somewhat more useful to create your section uses block elements like <div> tags instead of <table> tags. So as a proof of concept I decided to convert the classic green zen-cart template to a div-structured template.

It worked well and I decided to redesign it for a new template. Unfortunately I found it very difficult to design through all the layers and layers of excess <div> tags that are already in the default templates.

So a good portion of this template was completely redesigned and minimalized to make for a cleaner, more manageable, faster loading template.

Features:
- 1.3.7 based template
- Smooth fading images
- wc3 Validation
- Merged the top ezpage links and the main nav bar together in what i feel "should" have been done by default.
- removed a lot of the excess "wrapper" divs that seemed to be redundant. Also making it faster loading.


Demo:
http://www.unbannable.com/zen137


Take a look and tell me what you think before I release it. Let me know if you spot any problems.

I'm not sure what to do yet with the categories tabs at the top... any ideas?

[Ajeh]

Nice looking ...

Got a few bugs running around such as:
http://www.unbannable.com/zen137/ind...d=1&chapter=10

Table is the wrong color and don't see anything unless you run your mouse over it ...

The Cat Tabs don't have any type of highlighting when you mouse over them ...

But other than picky things like that it looks good ...

[qhome]

Thanks Ajeh!

Thanks for pointing out those bugs too.. As far as the category tabs I haven't styled them at all really.. didnt really know what I wanted to do yet.

I'm also going to add some custom buttons as well to blend better with the blue/silver theme

[Kim]

I am confused - you have removed the 1 layout table but added tables for the center boxes that were all div based?

[qhome]

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. :)

[Kim]

...and now you understand why the base template is designed the way it is. Because you can't please all of the people all of the time.

[qhome]

...and now you understand why the base template is designed the way it is. Because you can't please all of the people all of the time.

Well I can try :) :) but ya i see now that not everyone wants 12 days of learning the hardway..

But I probably would suggest ... in some parallel universe... that a lot of the extra divs be removed from the default template and leave it to the designers to add more if they need it for something special like expandable rounded corners or something.. I it looks like the css file was run through some sort of optimizer program to become like that. Would probably be better to start new installs off with just the basic block elements, even leave the main table structure.. and leave the css in a more raw, easy to learn format. I think that would benefit the zenning of many people when it comes to template designs.

[Ajeh]

Being a clueless coder with no design comprehension it is a lot easier to view source and see the class and/or id of what I want to change than try to add a class and/or id to the code and then to the stylesheet vs just add it to the stylesheet ...

But I am but a humble coder trying to make her way through a field of kudzu ... er ... css ...

[kobra]

Addition to having many tags in the css....

Check all the posts about "I can't find that tag" "Why aren't they all there" etc.

And they are not all there but the most commonly used/wanted ones are.

Interestin approach: tables inside of div's versus div's inside of tables.

Can't wait to see if a sliced image will line up correctly or if tables will be neededto get things lined up.

[qhome]

Being a clueless coder with no design comprehension it is a lot easier to view source and see the class and/or id of what I want to change than try to add a class and/or id to the code and then to the stylesheet vs just add it to the stylesheet ...

But I am but a humble coder trying to make her way through a field of kudzu ... er ... css ...

I agree.. thats why I'm saying take the not-so-semantic tags out of the code completely. To start with, only a few structural tags really need be there

container (iff u want a centershop look)
- header
- leftcol
- maincol
- rightcol
- footer

then perhaps in each one you might have one or two other divs for special stuff, but for a base design that is meant to easily be learned from, users will benefit more from less... in this case.. less is more.

Take a site like http://www.csszengarden.com (fitting i know). This site has one code base and is based on multiple people sending in CSS based designs to change the look, using the existing code and no html changes. There are hundreds of entries.. each one amazing. This was my inspiration... and to see how much can be done with just css and a few images on relatively simple layered div blocks, it makes things much easier to learn.