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 .