HTML5 and CSS3 Illustrated

Unit H: Implementing Page Layout with HTML and CSS

Objectives

Assess the CSS box model Construct a multicolumn layout with float Implement relative positioning Implement absolute positioning

HTML 5 and CSS 3 – Illustrated Complete 2 Objectives (continued)

Stack elements Create a multicolumn layout using positioning Create a fluid layout Control the visibility of elements

HTML 5 and CSS 3 – Illustrated Complete 3 Assessing the CSS Box Model

Box model: used by CSS to represent characteristics of every Web page element Ø Treats element as rectangular box Border: border surrounding element Margin: space from border to neighboring/parent element Padding: space between border and element content HTML 5 and CSS 3 – Illustrated Complete 4 Assessing the CSS Box Model (continued) Size of padding, margin, and border increase the amount of space occupied by an element Ø Dimensions of these properties not included in specified width / height • Specified width and height refer only to the content of an element When fitting elements into limited space, subtract padding, margin, and border area to get width or height

HTML 5 and CSS 3 – Illustrated Complete 5 Assessing the CSS Box Model (continued) When bottom margin of one element is adjacent to top margin of another, the margins combine to the size of the larger of the two Ø Affects element size planning Separate property for each side of padding and margin Ø e.g., padding-top:2px; margin-right:1em;

HTML 5 and CSS 3 – Illustrated Complete 6 Assessing the CSS Box Model (continued) Can set a common value using generic property Ø e.g., padding:0; Can use shorthand to set different values. Ø e.g., margin: 1em 2em 1em 3em • Values applied clockwise, first value for top Ø If less than four values provided: • Three values: top, left and right, bottom • Two values: top and bottom, left and right HTML 5 and CSS 3 – Illustrated Complete 7 Assessing the CSS Box Model (continued) CSS box model

HTML 5 and CSS 3 – Illustrated Complete 8 Constructing a Multicolumn Layout with Float User Agents render HTML top to bottom Ø Easy to create layouts with elements stacked vertically Use float, clear, and width properties to create columns of text and graphic parallel to each other Ø Use width property to assign width to each of the columns

HTML 5 and CSS 3 – Illustrated Complete 9 Constructing a Multicolumn Layout with Float (continued) Style sheet for multicolumn layout and resulting Web page

HTML 5 and CSS 3 – Illustrated Complete 10 Implementing Relative Positioning Page flow: the order of elements in the HTML document Relative positioning: adjusting default position of an element Ø Preserves space allotted to element in default page flow Ø Set position property to “relative” Ø Style exact location using left and top properties

HTML 5 and CSS 3 – Illustrated Complete 11 Implementing Relative Positioning (continued) Relative positioning and page flow

HTML 5 and CSS 3 – Illustrated Complete 12 Implementing Absolute Positioning Absolute positioning: takes element out of page flow entirely Ø Allows other elements to flow into space element would have occupied Ø Set position property to “absolute” Ø Style exact location using left, right, top, and bottom properties Ø Location is calculated relative to closest ancestor element that has position applied to it

HTML 5 and CSS 3 – Illustrated Complete 13 Implementing Absolute Positioning (continued) Absolute positioning and page flow

HTML 5 and CSS 3 – Illustrated Complete 14 Stacking Elements

Stacking elements: positioning two elements so that they can overlap on a Web page Ø Additional possibilities for layouts Ø Applies only to positioned element Ø Elements placed in new layer Ø Requires careful planning Stacking order controlled by values assigned to z-index property

HTML 5 and CSS 3 – Illustrated Complete 15 Stacking Elements (continued)

Stacking positioned elements

HTML 5 and CSS 3 – Illustrated Complete 16 Constructing a Multicolumn Layout Using Positioning Can use positioning to create multicolumn layouts Ø Look and behave just like float multicolumn layouts • More flexible for 3-column, allows for 4- column layouts Can position both columns, or position one and let the other flow around it Ø Leave large enough margin for positioned element

HTML 5 and CSS 3 – Illustrated Complete 17 Constructing a Multicolumn Layout Using Positioning (cont’d) Comparing multicolumn layout methods

HTML 5 and CSS 3 – Illustrated Complete 18 Creating a Fluid Layout

Fixed layout: specifying a fixed width for Web page content Ø Ensure consistency of visual design on different window sizes and resolutions Fluid layout: gives Web page flexibility to adjust its width while maintaining intended layout Ø A.k.a. Liquid layout Ø Uses min-width and max-width properties

HTML 5 and CSS 3 – Illustrated Complete 19 Creating a Fluid Layout (continued) Web page at different widths

HTML 5 and CSS 3 – Illustrated Complete 20 Controlling the Visibility of Elements You can use CSS to style whether element is displayed Ø Set visibility property to “hidden” • Element content not visible • Space reserved for invisible element Ø Set display property to “none” • Element content not visible • Other elements reflow into space that would have been occupied by invisible element

HTML 5 and CSS 3 – Illustrated Complete 21 Controlling the Visibility of Elements (continued) Alternatives for hiding Web page elements

HTML 5 and CSS 3 – Illustrated Complete 22 Summary

Box model: used by CSS to represent characteristics of elements Ø Treats element as rectangular box Ø Defines border, margin and padding Margins of adjacent elements can combine into one margin Use float, clear and width properties to create multicolumn layouts

HTML 5 and CSS 3 – Illustrated Complete 23 Summary (continued)

Relative positioning: adjusting location of element relative to its page flow location using position property Ø Space preserved Absolute positioning: taking elements out of page flow entirely Ø Other elements reflow into empty space Positioning can be used to create multicolumn layouts

HTML 5 and CSS 3 – Illustrated Complete 24 Summary (continued)

Fixed layout: specifying a fixed width for Web page content Fluid layout: gives Web page flexibility to adjust its width while maintaining intended layout You can use CSS to style whether element is displayed Ø Set visibility property to “hidden” or display property to “none”

HTML 5 and CSS 3 – Illustrated Complete 25