»
Aug 17th, 2009,
category:
CSS
,
Perm Link...
What is CSS
Go to see CSS, it is a very great CSS introduction
What is Layout
For web design, layout is how to place element in the web page. That's all but there will be long story for this thing, truth me.
What is CSS Layout
Be straightforward, CSS Layout is how to layout your web page using CSS.
Common, Don't reinvent the wheel (aka, What wrong with table)
Before fully support of CSS, web page layout is done using table, transparent image or non-breaking space ( ). It's fine but look at problem below:
- The size of page is big. You need to place a lot of table element, extra image or space tag.
- The Poor performance, the big page is, the slow page load.
- Very hard to maintain. It's probably easy if you use tool to generate/design you web page. It still hard to maintain because a new developer won't need to use tool like you (I will hire people like me, fae!).
- Not SEO friendly. Why, you may ask. If you ever try to look at the HTML (that the way robot work, baby) of the web page with a lot if table you will see nightmare. Why it not SEO friendly, because it is big, complicate, sometime it' doesn't valid.
- Lead to complex environment. If you know about DOM and you ever try to do some javascript against at the tree of table layout. You probably not happy anymore.
- Lead to buggy web page. See above!
OK, CSS all GOOD, right?
There is no thing perfect. For my opinion, the big cons of CSS are:
- You will need to learn CSS. Try it, I promise it worth.
- Web browser compatibly. I think it is a big reason if someone want to give the CSS up. But you have choices, using a simple, minimal and correct layout will help you.
Comments
# web development Mar 8th, 2010
I am very happy to have found this article, as I believe it can accomplish what I need to do. But sadly I don't enough experience with floats (nor negative margins) to cater this example to my needs. If someone could lend a hand, that would be great:
In a frame that is 200px wide (already accomplished :P), I want the following: left liquid div, center dix fixed at 5px (or 10px), right liquid div. This might be an easy alteration, but I just don't have the skills.