Cascading Style Sheets

1. Cascading Style Sheets Positioning Controls Visibility

2. Positioning in the Window • The browser window has 2 specific areas—the window and the active browser window. • The active browser window (viewport) refers to the area where the HTML document is rendered.

3. The default for the first object in the window is (0,0) (top, left).: This is in contrast to standard X,Y plotting coordinates which have (0,0) in the bottom left corner

4. Position Types • position: static • Defined based on the position of the element in the body of the document. • position: relative • Defined based on its parent object; if not specified, it's the body • position: absolute • Defined based on a rectangle starting from the top-left corner. Of the parent element. Objects are "out of the flow" of the normal document, so typically use a position:r elative wrapper <div> • position: fixed • Supported in IE7+. This is one way you can make a header or sidebar not scroll

5. Defining an Object Position • To position an element, you define the type of position, and usually the top-left corner of the object in the window • Example • { position: absolute; top : 3em; left : 5em;} • An object using this style definition would be positioned in the top of the parent/window 3ems down and 5ems from the left margin.

6. Defining position: • Options for top and left • A value • em or px • a percentage –relative to the parent’s width • auto (based on the browser calculation and the absolute position) • Right and Bottom are also options but they can override top and left. Also defining both left: and right: can cause conflicts

7. Stacking objects3-D positioning • You can use a position style called the z-index to give the sense of a 3rd dimension (or stacking of the objects) in relationship to one another. • Objects which are stacked are given z-index starting with 0. E.g..: z-index: 10; (Hint: use values such as 1, 10, 100 to be sure order is enforced) • In order to cause the stacking to happen, you use the position, top, left and z-index to define the object position. Elements w/o position: won't stack. • You can change the appearance by redefining the width and height. • If you don’t set the z-index, the elements stack in the opposite order and the large one is set on top

8. You may use the position styles to lay a series of the same object on top of itself. • Set the first object as absolute with a top and left and a z-index of 0. • Set the second object as absolute with a higher top and a further left value and a z-index of 1. • Set the third object as absolute with a higher top and a further higher left value and a z-index of 2.

9. Example • .pos1 {position:absolute; z-index: 0} • .pos2 {position:absolute; top: 2em; left: 3em; z-index: 1;} • .pos3 {position:absolute; top:5em; left;7em; z-index: 2;}

10. Floats • float: • Options are :left; :right; Note therefore you cannot float: top; and so on. • Should specify width for floated elements • Combine with clear: (left; right; both;) to move next element below floated elements, e.g. for footers #footer {clear: both;} • Some (e.g. Zeldman) stick to floats even though position: has more semantic meaning

11. Absolute within a Relative • If you position an object using an absolute position within a relative element, the absolute object will appear in an absolute place within the relative box. Often used for wrapper <div id="wrapper"> then #wrapper {position: relative; width: 90% margin: 0 auto;} • May be used to put a background image in a paragraph.

12. Relative within an Absolute • The absolute object is positioned—the relative object is positioned within the limits of the absolute window (see "dropshadow" example) • If you move the absolute object—everything moves.

13. Visibility • You may set the visibility of an object to be hidden {visibility: hidden;}. This will cause the space for the object to be allocated in the page and a big rectangle placed where the object should be in the page. • With a visibility setting the object is allotted space in the page—with display set to none, no space is set in the page. {display: none;}

14. Clipping an Object • You can cause the portions of an object to be clipped • Style • clip: rect(top,right,bottom,left) • The values are distances from the element’s origin.

15. Overflowing an Object • Defines how an object is displayed when it doesn’t fit in area (e.g. when clipped). • overflow: • scroll • Sets the scroll bars around the visible area (acts like an <iframe>) • hidden • Hides the overflow area and the scroll bars • visible • Causes the clipped area to shop up over the area. • auto • Allows the browser to define how to handle this overflow.

16. Opacity Use of filter: for old IE opacity: for MOSE. Also we'll look at rgba(), part of CSS3, and there are new CSS filters • cursor: (lots of options, e.g. cursor: help; for popup boxes) • Scrollbars (old IE only)