Basket
Your basket is empty.
Wednesday 21 July 2010 by Norbert Laposa
This article will describe how to build any layout from a combination of two columns.
Building layout in web design is considered to be the hardest thing. The most popular method at the moment seems to be the grid layout. It's not really natural. In my opinion it's something like using a bitmap graphic when you should be using a vector graphic.
To understand this article you do not need to have any knowledge of HTML, CSS, or any Adobe products. You only need to switch off everything you know about web design and try to look at it as normal human being. Tons of material has been written about how to create 2 or 3 column layout for your website, like the "holy grail" articles or grid design.
The key thing is to use nested sets of two column layouts, i.e. Fibonacci number based set below. Insert the same code into [CONTAINER.1] or [CONTAINER.2] recursively and it does the trick.
<div class="twoColumnLayout {NODE.css_class}"> <div class="layoutWrapper"> <div class="top"><span></span></div> <div class="layoutContent"> <div class="layoutContentWrapper"> <h2 class="layoutTitle">{NODE.title|htmlspecialchars}</h2> <div class="layoutColumnOne"> <div class="layoutColumnWrapper"> [CONTAINER.1] </div> </div> <div class="layoutColumnTwo"> <div class="layoutColumnWrapper"> [CONTAINER.2] </div> </div> </div> </div> <div class="bottom"><span></span></div> </div></div>
Fibonacci number based layouts
| Class | Name | layoutColumnOne | layoutColumnTwo |
| fibonacci-1-5 | Fibonacci 1/5 ratio | 16.6% | 83.3% |
| fibonacci-1-3 | Fibonacci 1/3 ratio | 25% | 75% |
| fibonacci-2-5 | Fibonacci 2/5 ratio | 28.6% | 71.4% |
| fibonacci-1-2 | Fibonacci 1/2 ratio | 33% | 66% |
| fibonacci-3-5 | Fibonacci 3/5 ratio | 38.2% | 61.8% rounded to Golden Ratio * |
| fibonacci-1-1 | Fibonacci 1/1 ratio | 50% | 50% |
| fibonacci-5-3 | Fibonacci 5/3 ratio | 61.8% | 38.2% rounded to Golden Ratio ** |
| fibonacci-2-1 | Fibonacci 2/1 ratio | 66% | 33% |
| fibonacci-5-2 | Fibonacci 5/2 ratio | 71.4% | 28.6% |
| fibonacci-3-1 | Fibonacci 3/1 ratio | 75% | 25% |
| fibonacci-5-1 | Fibonacci 5/1 ratio | 83.3% | 16.6% |
Examples how to build different 1, 2, 3, 4, 5 and more columns layouts using just Fibonacci 2 columns are on Onxshop documentation page.
* The ratio of consecutive numbers in the Fibonacci is close to 1.618, the Golden Ratio - convergence of Fibonacci number in infinity. Fibonacci number for 3:5 would be 1:1.666, Golden Ration is 1:1.618
** 1.666:1, convergence to golden ratio, 61.8/38.2 (Golden ratio 1.618:1), convergence of Fibonacci number
Thursday 1 July 2010 by Norbert Laposa
I had an idea of creating a clip image by using CSS, so the CSS clip property looked like the perfect way to achieve that. After some googling I found Joe's article at seifi.org. Joe advocated an entirely functional, but unnecessarily complex solution.
I came up with a much simpler way. The trick is that you don't need to use the CSS clip property when you want to clip an image. Here is a simple way to clip an image to 300x200px, push 20px top and 30px left:
div.imageWrapper {width: 300px;
height: 200px;
overflow: hidden;
}
div.imageWrapper img {
margin-top: -20px;
margin-left: -30px;
}© 2024 Laposa UK