Implementing Page Layout

Unit H

CSS Box Model �  Typical Screen Width

�  The maximum width of a screen is 1024 pixels �  Professional designers calculate their elements for a

screen width of 960 pixels (just to be safe)

�  Creating Space around Elements �  Padding – space inside the element

�  Between border and content

�  Border – width, style, color �  If set to 0, it is not visible and takes up no space

�  Margin – space outside of the border �  Between the border and adjacent elements

Calculating Box Size �  Width and height are separate

�  Border, padding, and margin are added to the size of the element

�  Subtract these values appropriately to fit into a limited space

�  Collapse – when the bottom margin of one element is adjacent to the top margin of another element �  The two margins will combine into a single margin

equal to or greater than the combined values

Property Values �  Padding & Margin

�  4 values – top, right, bottom, left

�  3 values – top, left/right, bottom �  2 values – top/bottom, left/right

�  1 value – all sides equal

�  Border �  Width, style, color

�  3px, solid, red

Multicolumn Layout �  Page Flow – the most basic layout

�  Elements flow from top to bottom �  Use Float & Clear to position elements

�  Relative Positioning – exact location of the element �  Use Top & Left properties

Absolute Positioning �  Takes the element out of the page flow entirely

�  Specify the new location to the closest element �  Use the Top, Left, Right, and Bottom properties

�  Group Task �  Insert absolute positioning into Lakeland Reeds

�  A light icon next to each page link

�  A shaded icon next to the currently open page

<img src=“images/fl_light.gif” width=“45” height=“45” alt=“” title=“” />

<img src=“images/fl_dark.gif” width=“45” height=“45” alt=“” title=“” />

Lakeland CSS File �  Add Properties to #mainnav

�  Padding-left: 1em �  Text-align: left �  Width: 6em

�  Add a style based on li img �  Position: absolute �  Left: -40px �  Top: -8px

�  Update #mainnav li �  Position: relative (not to change the position)

Question #1 What is the standard width that web designers use

when creating web sites for the general public?

960 pixels

Question #2 Which property is not useful when creating a

multicolumn layout?

�  Width

�  Background

�  Float

�  Position

Background

Question #3 Which does CSS use to represent the characteristics

of ever Web page element?

�  Relative positioning

�  Absolut positioning

�  Multicolumn layout

�  Box model

Box Model

Question #4 Which name value pair takes an element out of the page flow entirely and allows other elements to flow

into the space it would have occupied?

�  Display: none

�  Visibility: hidden

�  Position: relative

�  Position: absolute

Absolute Positioning