1. Cascading Style Sheets Class 3, Lecture 4 Rachel A Ober rober@ccs.neu.edu

2. Positioning Four positioning attributes: Static: The default. Static gives the normal flow that the page gives it. Ignores any top, right, left or bottom specifications. Relative: Moves the element to the position relative to its normal position. Absolute: This moves the element to specified coordinates relative to the containing block. Fixed: The element is positioned to the specific coordinates of the browser window.

3. Relative Positioning Moves an element RELATIVE to its original position in the document. Use left, right, top, bottom to move element. Can use negative values to move element as well. Note: When relatively positioning elements, it will affect other elements in the document. Example: http://www.w3schools.com/css/tryit.asp?filename=tr ycss_position_relative http://www.w3schools.com/css/tryit.asp?filename=tr ycss_position_relative

4. Absolute Positioning Absolute positioning lets you place the element anywhere on the page. You can use left, right, top, bottom to position the element. Example: http://www.w3schools.com/css/tryit.asp?filen ame=trycss_position_absolute http://www.w3schools.com/css/tryit.asp?filen ame=trycss_position_absolute

5. More On Positioning Elements Setting shape of element How overflow is displayed Using Z-index to place elements “behind” another element. http://www.w3schools.com/css/css_positionin g.asp http://www.w3schools.com/css/css_positionin g.asp

6. Media Types You can specify your style sheet to look different on different medias Available medias, all, aural, braille, embossed, handheld, print, projection, screen, tty, tv

7. Quick Compare Screen: http://cpu.rachelober.com/http://cpu.rachelober.com/ Print: See Printout Handheld: See my PDA