Topics
- CSS positioning overview (static, relative, and absolute positioning)
- The vagaries of the CSS display property (view at your own risk)
Advanced CSS examples
- Background images this example shows how to use the background-image property in CSS to set a background image. Background images can be tiling or non-tiling.
- Creating horizontal menus from list tags – this example shows a common practice developers have of using <li> items to create navigation lists. Normally, <li> tags are stacked vertically one on top of the other. Using this technique, you can make them appear side by side, so that they no longer look like lists.
- Static positioning – this example has two boxes with static positioning, which means they use the browser default positioning. Static positioned content is often referred to as non-positioned, since it uses the browser’s default.
- Relative positioning – this example works off of the static positioning example, and shows how relative positioning can shift a box from its default position on the page.
- Absolute positioning – this example shows how you can fix an element’s position relative to the top-left of the browser window using absolute positioning.
- An absolutely positioned element within a relatively positioned element – example shows that the inner box in this case, despite having absolute positioning is actually positioned relative to the top-left corner of the outer box.
- Z-index property – an example that shows how to make one box appear to be on top of another box. Changing the z-index values of the various boxes alters which box appears to be “on top” of which other boxes… note that this only works for elements that are either relatively or absolutely positioned. It does not work for statically positioned elements.
- Sprites – we use a single image file that actually has two versions of an icon side-by-side. Using the background-position CSS property, we show only one of the versions of the image at time, and shift the background image’s position when a user hovers over it. This gives the illusion of there being an active state, and a passive state of the same icon. A similar code example that shows background images is listed here.
- Some more examples of layout with clear and float: a simple example of two divs floating next to each other; another example with the added complication of two more floating divs nested inside of a floating div. Note how any series of floating divs are always followed by a “clear” div.
Practical CSS tips
- Formula for calculating widths of columns in layout
- CSS & JavaScript workaround for Internet Explorer
Homework
- Homework assignment #1: Blackbook (here’s a tip for styling the submit button in this assignment)
- Homework assignment #2: MTV videos (if you are totally lost, try getting started with this MTV basic layout code example)
Examples of notable Blackbook homework solutions
Each of the following students solved the BlackBook problem in their own way. There is no “right” solution, so these are all great, and they are listed in alphabetic order.