Cascading Style Sheets Class 3, Lecture 4 Rachel A Ober

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.

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: ycss_position_relative ycss_position_relative

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: ame=trycss_position_absolute ame=trycss_position_absolute

More On Positioning Elements Setting shape of element How overflow is displayed Using Z-index to place elements “behind” another element. g.asp g.asp

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

Quick Compare Screen: Print: See Printout Handheld: See my PDA