laying out elements with css

Laying out Elements with CSS

Objectives

Assess the CSS box model

Set element width and borders

Set margins and padding

Align elements with float

Control page flow with clear

HTML5 and CSS3 – Illustrated, 2nd Edition 2

Objectives (continued)

Implement fixed positioning

Implement relative positioning

Control stacking order

Implement absolute positioning


Assess 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


Assess the CSS Box Model (continued)

The CSS box model



Box model properties



CSS units of measure Relative units: ems, percent, rems Absolute units: pixels

Commonly used CSS units of measure



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• To calculate add the total space, add the width value to the padding, margin, and border values



Calculating web page space occupied by an element



Collapse: 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;


Set Element Widthand Borders

Margin, padding, and border are shorthand properties Assign values to multiple CSS properties Assign values to all four sides of an

element Assign these values using a single

declaration

Can set width, style, or color of any or all sides of an element


Set Element Widthand Borders (continued)

Specific properties for the box model

Reset rule: resets one or more common properties to a common baseline, e.g.border: 0



Code with width and border declarations



width and border declarations rendered in a browser and developer tools opened to show box model


Set Margins and Padding

Use the shorthand property to assign multiple values Separate each value with a space Meaning of different number of values

Assign auto to left and right margins to center the element horizontally


Set Margins and Padding(continued)

Example of padding using three values and margin using two values

Example of margin set to auto


Align Elements with float

Page flow: the order of elements in the HTML document 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 graphics parallel to each other Use width property to assign width to

each of the columns


Align Elements with float(continued)

Example of float applied to element

Use float to create multicolumn layouts


Align Elements with float(continued)

Code with float and result in browser


Control Page Flow with clear

float gives basic control over layout

clear gives more precise control Prevents floated elements from being

displayed to the left, right, or on the side of another element

clear property values


Control Page Flow with clear(continued)

Example of clear property


Control Page Flow with clear(continued)

Code including clear property and how it is rendered in a browser


Implement FixedPositioning

fixed positioning keeps an element in the same location, even when the page is scrolled

Use the position property with the value of fixed

Then specify Horizontal position using left or right Vertical positing using top or bottom


Implement Fixed Positioning (continued)

Commonly used position properties

Properties and values for fixed positioning



Example showing fixed positioning



Code including fixed value and how it is rendered in a browser


Implement Relative Positioning

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 the properties

•left and right for horizontal positioning•top and bottom for vertical positioning


Implement Relative Positioning (continued)

CSS properties and values for relative positioning



Implementing relative positioning and page flow



Code using relative positioning and how it is rendered in a browser


Control stacking order

Stacking elements: positioning elements so that they can overlap 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


Control Stacking Order(continued)

Stacking positioned elements


Control Stacking Order(continued)

Code to stack and how it is rendered in a browser


Implement AbsolutePositioning

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


Implement AbsolutePositioning (continued)

Absolute positioning and page flow

Properties and values


Implement AbsolutePositioning (continued)

Code to absolutely position an element and the result in a browser


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 collapse into one margin

Specify border width, style, and/or color of any or all sides


Summary (continued)

Use multiple values to assign margin and padding values to different sides

Use float to change the default page flow

Use clear to create a more precise layout

Use float, clear and width to create multicolumn layouts


Summary (continued)

Fixed positioning: keeps an element in the same position, even when the page is scrolled

Relative positioning: adjusting location of element relative to its page flow location using position property Space preserved


Summary (continued)

Use z-index to create a stacking order for elements Stacked elements are placed in new

layers

Absolute positioning: takes elements out of page flow entirely Other elements reflow into empty space


laying out elements with css

Education