CSS: flow vs. positioning
Some day I hope to do a series of entries, maybe even little articles, to bring longtime HTML hand-coders up to date on recent developments in web-page creation, including:
- XHTML (including putting closing tags at the ends of paragraphs and list items)
- CSS (how to format and position elements on the page without using tables, which weren't designed for positioning)
- getting rid of old outdated tags (like <i> and <b> and <font>) in favor of CSS formatting
- getting rid of old-fashioned too-specific formatting elements (such as indenting using nonbreaking spaces, line breaks using <br> tags, centering using <center> tags and align="center")
- disabled-accessibility issues (including choosing good alt text for images)
- cross-browser compatibility issues
- choosing good text to apply links to (one hint: "here" and "click here" are not good text to apply links to, because of the way screen readers work for visually impaired people)
- using entities, including how to insert em dashes and curved quotation marks
and why all these things are a good idea and you should go to the trouble of unlearning old coding habits.
But I'm not gonna do any of that today.
Today I'm just going to note that there's a good article providing information about two models for CSS-based page layout: flow and positioning. This article probably won't make sense to you at all if you aren't familiar with the basics of CSS, but if you've done a little CSS and have a vague sort of idea of how it works, it's a good article for explaining in more detail just how page layout really works, and what the differences are between those non-intuitive CSS positioning terms static, relative, and absolute.
