1 / 16

Cascading Style Sheets

Cascading Style Sheets. Positioning Controls Visibility. 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.

Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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+ (and MOSe of course). 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 are not supported by all browsers. 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 • cursor: (lots of options, e.g. cursor: help; for popup boxes) • Scrollbars (old IE only)

More Related