unit h: implementing page layout with html and css and...assessing the css box model (continued) can...

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


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


(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


(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;



(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


(continued)


CSS box model

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



Layout with Float (continued)

Style sheet for multicolumn layout and

resulting Web page


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


Implementing Relative

Positioning (continued)

Relative positioning and page flow


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


Implementing Absolute

Positioning (continued)

Absolute positioning and page flow


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


Stacking Elements (continued)


Stacking positioned elements


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



Layout Using Positioning (cont’d)


Comparing multicolumn layout

methods

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

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


Controlling the Visibility of

Elements (continued)


Alternatives for hiding Web page

elements

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


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”


unit h: implementing page layout with html and css and...assessing the css box model (continued) can...

Documents