LayoutDivOrTable

A general layout for Tiki : Table / Div / Hybrid ?
Or the first step to "how to simplify the style sheet?
Or how to have a "community identity" ?
Or how to go to the movie theater with your girl friend and have your own tiki site?
... Appendix to SimpleStyleDev (thanks luci)

Facts:

• there is a lot of themes on Tiki (thanks to the creators) but nothing fits you, and when you want to modify the closest one: it is hard !
• you can also have trouble with the browser (MSIE6... kind of enemy in the open source but the major browser doesn't like very much some themes,espacially the one you want ...)
• you find good ideas in each theme : the moreneat theme (the upper menu+ working with a bunch of browsers) but you find the matrix is very cool (the no-div layout + the "split" css) or the design feature with codex and .... (sorry each theme has something, (I was a fan of olive because of the color .... but I don't want to be out with the timeout problem!)

So:

• How to pick up the good of each style sheet?
• How to easily put your color (colour?) and spice in a theme(you are a community with something special)?
• How to be browser safe? (perhaps you are paid by somebody who wants to be friendly...)
• How to be proud of your site (the most important without loosing your girl friend because you are too busy)?

So (2):

• You look at what we have... a lot
• So can you use this to have your Tiki?

So(3)

• How can you build your own style sheet/identity

=> cutting the css into little pieces and be able to have this layout with this color with these boxes...
=> have something easy to test
=> reduce the number of classes or ids ..
put your proposal here...

So ... if we begin with the general layout

Tiki usually uses a representation 1 top, 3 columns, 1bottom :
TTTTTTTTTTTTTTTTT
LLL CCCCCCCCC RRR
LLL CCCCCCCCC RRR
LLL CCCCCCCCC
CCCCCCCCC
BBBBBBBBBBBBBBBBB
Of course this representation can be changed to ... everything ... that has at least 1 modules container and 1 data container...

Actually, in Tiki we can find 2 groups of layout:

• those that use tables and div. Ex: moreneat, codex
• those that use only div. Ex: matrix

The css , Xhtml directives ask to use only divs... If it the God's speach , it is good
... We are Open Source, so we are the future

To represent the 3 columns, I (sylvie) knows 2 methods

• position property
• float property

A lot of sites explains this

http://www.alistapart.com/stories/practicalcss/ _ explains how to be ...different...
So I tried ... (a bad implementation but with the tiki style to play around)

I had problem with the position property:

• I (sylvie- hope some guy better than me) don't find the way to position the bottom div. The bottom follows the relative column. But if one of the absolute column is higher, there is a problem - test yourself. So one solution (solution chosen by matrix) is the reduce the width of the bottom to the relative column.... a good compromise. another sulution is to write a javascript program tp position the bottom but javascript:-( and not very WAI complaint).
• Another problem occurs when the center column is too large to fit in the window. I didn't find a way to push the right column

The float property :

• the problem is when you reduce the window size, the columns go under each other
• I didn't find a way to expand the size of the center column at the maximum.
• there is the IE6 float bug (I didn't meet it)

So what is next...

• do a layout only with tables with a minimum of margin padding (the know bug about thedifferent way the browsers interprets the width of the boxes)
• try to identify all the pattern use in the data column - this is the big part
• offer a list of css / templates well doucumented: somebody will be able to chose a layout with positionned divs and boxes of this type ...

Page comments from tw.o: