MORE Cascading Style Sheets (The Positioning Model)

Slide 2 CSS (Box Model) Remember that CSS views all HTML 5 elements as a rectangular box consisting of A margin around the box A border Padding, which is the boundary from the content to the border of the box The box’s content

Slide 3 CSS Box Model (Description) margin – Whitespace (transparent) surrounding the border border - A border inside the margin. The border is affected by the background color of the box padding – Whitespace inside the border and outside the content Padding is affected by the background color of the box content - The content of the box, where text and images appear

Slide 4 Box Size The box size is controlled by two properties width Use relative measures to size around the parent window or browser window Absolute values work too height Contents will overflow the box if the height is set See BoxIntro.htm

Slide 5 CSS Box Model (Margin) Margin appears outside of the border Margins have no color They are always transparent Use margins to create padding next to adjacent elements

Slide 6 CSS Box Model (Margin – Example) Set all box margins margin: 10px; Set the individual box margins margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Slide 7 Outline The outline property works like the border property It appears outside of the border for emphasis It has a style, color, and width See BoxIntro.htm

Slide 8 Padding The space inside the border and surrounding the box content Set all at once or the individual sides padding-top padding-bottom padding-left padding-right

Slide 9 Positioning Elements (Introduction) So far, we have applied styles to format text or to format various box margins Here, we are talking about how to explicitly position the box itself relative to other boxes This discussion involves the concept of flow Pay particular attention to the use of the and tags

Slide 10 Flow (Introduction 1) There are two types of flow (positioning) Block Elements start on a new line By default, they are the same width as their container, Inline An element starts on the same line as the preceding element,,, etc..

Slide 11 Flow (Introduction 2) It’s possible to control flow using the CSS position property static fixed relative absolute float

Slide 12 Positioning (Static) Static Positioning (normal flow) This is the default positioning method Items are positioned according to the normal page flow Left to right – top to bottom The top, bottom, left, and right properties are not applied when static positioning is applied

Slide 13 Positioning (Fixed 1) Fixed Positioning An element is positioned relative to the browser window or parent container Elements will not move even if the browser contents are scrolled Fixed elements are no longer part of the normal document flow

Slide 14 Positioning (Fixed 2) Use properties ( top, bottom, left, right ) to specify the coordinate Elements can overlap Use the z-index property to control overlap Larger values appear in front – smaller values appear in back See FixedPositioning.htm

Slide 15 Positioning (Relative 1) Relative Positioning Elements are positioned “relative” to the normal position Normal document flow is still used Use properties ( top, bottom, left, right ) to specify the coordinate relative to the normal flow Negative values move left Positive values move right

Slide 16 Positioning (Relative 2) A relative positioned element is positioned relative to its normal position Use left, right, top, left to alter the position Note that negative values are possible left:-20px will move the box 20 pixels to the left Relative positioning is typically used for containers such as

Slide 17 Positioning (Relative 3) Elements might overlap Use the z-index property to specify which overlapping item is in front, and which is in back The property has an integral value Larger values appear in front of smaller values See RelativePositioning.htm

Slide 18 Positioning (Absolute) Element is positioned relative to The first parent element that has a position other than static Remember that static is the default Or the browser window Absolute positioned elements are removed from the normal document flow Absolute positioning is often used with containers See AbsolutePositioning.htm

Slide 19 Floating Content We often want text to wrap around an image or other element This is the purpose of the float property Elements are always floated horizontally If an element is floated left, elements float from the left side of the browser window or container The reverse is true when elements are floated from the right See Floating.htm

Slide 20 Controlling Display (1) The display property describes how elements will be displayed block – elements are displayed as a block with whitespace above and below inline – elements are displayed inside the current block on the same line none – elements are not displayed and take up no space