Tuesday, June 17, 2008

Getting Started With CSS Positioning

I can't believe how simple and great this is. I'm now officially a total div zealot. I can't believe I've beem fooling around w. tables as long as I have. what a lot of wasted time. A web app that I have been working on recently has forced me to really immerse myself in CSS, and while I'm not an expert yet by any stretch, I can find my way around now at least. I guess it just takes a real project to really get some things into my brain.

The point of the post then is how to get some of this stuff into your brain. Expression Web has some really nice templates that were super instructive for me. If you open "File > New Page" it gives you several alternatives. one type is "CSS layouts". This lays out several typical web page designs for you with all the named divs and CSS positioning in place. From there you can cobble together how to handle most any scenario. It's really economically written CSS, a nice learning tool.

If I had to pick out a couple quick hits,
1. I would say that it's important to arrange your page markup so that divs that are going to float:left; & float:right; come first in the flow.

2. It's also important to make your container div position:relative while any divs inside this should be position:absolute, and typically with fixed widths. I have to research this a bit more to understand it exactly, but it enables a nice positioning capability.

a couple of nice links I found,

http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute

http://www.barelyfitz.com/screencast/html-training/css/positioning/

and of course, the ubiquitous

http://www.csszengarden.com/

more to come on this. I think CSS will continue to be an interest for quite some time...

No comments: