CSS: Layout
Positioning
- Types
- Static (default) - normal flow
- Relative - moves box relative to position in normal flow. Orginal space is preserved.
- Absolute - removed from document flow and are positioned relative to containing element. Originial space is used.
- Fixed - element stays in one position on the screen and is removed from doc scroll (like our cabbage background)
- Examples
- .ex_rel { position: relative; top: 30px; left: 60px; background-color: fuchsia; }
- .ex_absol { position: absolute; top: 30px; left: 60px; background-color: fuchsia; }
- .ex_fixed { position: fixed; top: 30px; left: 60px; background-color: fuchsia; }
Layout Types
- Three Main Types
- Fixed - created with px values and auto margin-left and right to center content on page.
- Liquid - created with %age width and margin values
- Elastic - created with em values to resize boxes based on text size
- Combos
- Liquid and fixed width - left col (nav) is fixed in px and right (content) is static (default) and fills remainder of page
- What We Want in a Layout!
- Comfortable line length - 60-75 charas or 10-12 words per line
- No horizontal scroll
- Boxes resize to accomodate changes in text sizes and screen resolution
- Tutorial - here's an excellent online tutorial from webreference.com
- Fixed
- uses px values
- also called "ice layout"
- all columns, images and spacers are an exact px widths
- does not scale
- uses a wrapper div and a value of auto on left and right margins to center content
| Advantages |
Disadvantages |
| Layout is predictable |
Content on right can be hidden if client resolution is low (causes horizontal scroll) |
| Good line length control |
Text elements resize when font size is changed - so layout may vary |
- Liquid
- uses %age values
- scales in relation to the browser window; as the browser window gets bigger, the columns get wider and visa versa
- uses a wrapper div to center content
- real life example: www.w3c.org
| Advantages |
Disadvantages |
| Don't need to design for specific monitor resolution |
Unpredictable at extreme resolutions. Can use min and max-width settings to accomodate. |
| Text reflows with font size changes - eliminates akward spacing w/in box |
|
- Elastic
- uses em values!
- also called "jello layout"
- scales in relation to the default browser font size; as the default font gets bigger, the columns get wider and visa versa
- uses a wrapper div to center content
- real life example: http://www.csszengarden.com/?cssfile=/063/063.css&page=0 (notice line length of text remains unchanged)
| Advantages |
Disadvantages |
| Gives consistent layout (line length and line breaks), while adapting to changes in text size. |
Images don't rescale. Backgrounds okay! |
| Better line length control than liquid and fixed. |
Extremely large text sizes can be managed with max-width property |
- Excersie 1-3: Let's try three different CSS layouts.
No homwork this week!
Enjoy the break and get busy on your final project :D