History: Jello-piefecta
Preview of version: 1 (current)
- «
- »
Tiki implementation of Piefecta
A little experiment adapting a no-tables liquid layout to Tiki, to be continued....
"The Piefecta layout, now with a liquid center column, poured into a brand new Jello Mold wrapper invented and explained by Mike Purvis. Features: Source ordered, all cols same length, all areas tilable, customized width behaviors."
The Features
From www.positioniseverything.net:
"Grab ahold of the window edge and drag it back and forth. When it's narrowed down, the center column shrinks until the wrapper reaches a set minimum width. Going the other way, the center widens up to a set width and then locks. Pay special attention to the side 'margins' while this is happening. Notice how the side spaces also grow while the center col is widening? This is the Jello Mold effect in action, and you may easily customize the ratio between the widening rates of the wrapper and the center col.
"The lower limit is reached when the side body paddings touch each other, in this case at 680px window width. This means that no scripting is needed for the inclusion of IEwin to the min-width effect! The upper limit is enforced by a max-width on #sizer, and IEwin is included via an 'expression' hidden in a Conditional Comment in the head. While this is a script, the user cannot disable this type of CSS expression when disabling JavaScript.
"Both these limits are easily customized, btw. The min-width effect the result only of CSS padding, so it is 'natural' and works in all modern browsers without problems, including IEmac, which does not obey the max-width effect unfortunately.
Comments re: Tiki
Only minimal styling has been done as this is, so far, a layout experiment. Background images are the same as used in the original Piefecta demonstration, for comparison purposes. For Tiki the center div was given an auto overflow property to prevent content from overlapping the right column. This is probably one of the main problems to be dealt with when implenting dynamic no-tables layouts for Tiki.