Tuesday, August 5, 2008

Simple Div Layout with CSS: Part I - Hard-Style

Part 1 - Part 2 - Part 3
A blogger recently asked for help on creating a layout in this modern day and age, where iframes have become remnants of an older web.
I started learning about layouts some years ago on the classic Dreamweaver. Yes, frames were fashionable. The iframe was a winner for a static/dynamic page(to me). Remember base target=?
Nowadays, Divs and Tables have become the clever layout tools of choice and if you know some CSS definitions, you can make your own layout. It all depends on how far you push your creativity.
Later on, when I started meddling with blogger, I found it to be quite easy. Some things were learnt the hard way but now it is all too simple to play around with. For most, creating a custom design is a must and for others, you guys can stick to downloading a custom template.
On Joomla (MyDL), it is essential for the styling in this layout to be hard-coded, because there is no other way to represent it. It is also a learning experience for those interested.
For more experienced users I recommend creating a 'stylesheet.css' and linking it to your html page to minimize loading times. I will cover that in the next 2 parts.
Let us have a look at what my css layout looks like. More...