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

Layout examples

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

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.