Cascading Style Sheets

1
Cascading Style Sheets

• Positioning Controls
• Visibility

2
Positioning in the Window

• The browser window has 2 specific areasthe
  window and the active browser window.
• The active browser window refers to the area
  where the HTML document is rendered.

3

• The active window should be considered a
  rectangle. The rectangle has a position in the
  window. The top left corner is the position of
  the element in the window.
• The element (based on its defined or specified
  width and height) expands to fill in the
  rectangle.
• The default for the first object in the window is
  (0,0)

4
Position Types

• Static
• Defined based on the position of the element in
  the body of the document.
• Relative
• Defined based on its parent object
• Absolute
• Defined based on a rectangle starting from the
  top-left corner.
• Fixed
• Not supported in IE or Netscape

5
Defining an Object Position

• To position an element,
• You define the type of position
• And 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 window 3ems down and
  5ems from the margin.

6
Defining the margins

• Options for top and left
• A value
• em or px
• a percentage relative to the parents width
• auto (based on the browser calculation and the
  absolute position)
• Right and Bottom are also options but are not
  supported by all browsers

7

• Defining a negative value for
• Top will cause the element to be raised above
• Left will cause the element to be moved on the
  opposite side of the margin.

8
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.
• In order to cause the position to happen, you use
  the position, top, left and z-index to define the
  object position.
• You can change the appearance by redefining the
  width and height.
• If you dont set the z-index, the elements stack
  in the opposite order and the large one is set on
  top

9

• 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.

10
Example

• .pos1 positionabsolute z-index0
• .pos2 positionabsolute top 2em left 3em
  z-index1
• .pos3 positionabsolute top5em left7em
  z-index2

11
Example

• To make them seem like a progression, change the
  side of the image (width and height)

12

• .pos1 positionabsolutez-index0
• .pos2 positionabsolute top 2em left 3em
  width 10em height 25em z-index1
• .pos3 positionabsolute top5em left7em
  width 5em height 15em z-index2

13
Absolute within a Relative

• If you use position an object using an absolute
  style within a relative element, the absolute
  object will appear in an absolute place within
  the relative box.
• May be used to put a background image in a
  paragraph.

14
Relative within an Absolute

• The absolute object is positionedthe relative
  object is positioned within the limits of the
  absolute window.
• If you move the absolute objecteverything moves.

15
Visibility

• You may set the visibility of an object to be
  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 pagewith display set to none, no
  space is set in the page.

16
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 elements
  origin.

17
Overflowing an Object

• Defines how an object is displayed when it
  doesnt fit in area.
• overflow
• Scroll
• Sets the scroll bars around the visible area
• 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.