Class 4
Topics
- CSS positioning overview (static, relative, and absolute positioning)
- The vagaries of the CSS display property (view at your own risk). We deal with elements as if they are all either display:block or display:inline. However there are, in fact, more than just those two types of elements. This site shows the full list of display types and the browser support (or lack thereof) for each. You are advised to stay away from display properties that are not fully supported across all major browsers – in other words stay away from anything except display:block, display:inline, or display:none.
Practical CSS tips
- Formula for calculating widths of columns in layout
- CSS & JavaScript workaround for Internet Explorer
Layout examples
- An example of a common “C-clamp” (a.k.a. “2 column”) layout.
- An example of a common 3-column layout.
- Another example of that same 3-column layout with child elements nested within the header.
- A simple example of using the float/clear technique to layout two divs floating next to each other.
- Another example of the same two divs with the added complication of two more floating divs nested inside of one of the floating div. Note how any series of floating divs are always followed by a “clear” div.
- 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.
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.
- 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.
Homework
- Homework assignment #1: Blackbook
- Homework assignment #2: MTV videos (if you are totally lost, try getting started with this MTV basic layout code example). The actual application is live on Facebook, but don’t try to immitate the code you see there – it is somewhat specific to the Facebook environment.
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.
Loading ...