3. KEY CONCEPTS IN POSITIONING ELEMENTS Lorem Ipsum BUILDING BLOCKS
BLOCK LEVEL
INLINE
Explain: difference between block level and inline (again)
Fade in: block level
Click: inline
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc. Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien.
Duis in erat neque.
Pellentesque habitant morbi
Praesent ac condimentum neque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc. Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien.
Suspendisse potenti. Duis in erat neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

4. KEY CONCEPTS IN POSITIONING ELEMENTS Lorem Ipsum CONTAINING ELEMENTS
Lorem Ipsum Dolor Consectetur
Click: container around whole page fades in
Click: container around header fades in
Click: container around page fades in
Click: container around footer fades in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc. Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti. Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Suspendisse potenti. Duis in erat neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aute irure dolor in reprehenderit in velit esse cillum dolore eu fugiat nulla pariatur.

5. CONTROLLING THE POSITION OF ELEMENTS Lorem Ipsum orem Ipsum
NORMAL FLOW
orem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc.
Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti.
Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Lorem Ipsum

6. CONTROLLING THE POSITION OF ELEMENTS Lorem Ipsum RELATIVE POSITIONING
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc.
Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Lorem Ipsum
Click: middle paragraph moves from normal to relative position
Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti.

7. CONTROLLING THE POSITION OF ELEMENTS Lorem Ipsum RELATIVE POSITIONING
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc.
Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Lorem Ipsum
Click: middle paragraph moves from normal to relative position
Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti.

8. CONTROLLING THE POSITION OF ELEMENTS Lorem Ipsum ABSOLUTE POSITIONING
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc.
Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti.
Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Lorem Ipsum
Click: Heading moves from normal to absolute position and paragraphs move up because the space absolutely positioned element took up is ignored

9. CONTROLLING THE POSITION OF ELEMENTS Lorem Ipsum ABSOLUTE POSITIONING
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc.
Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti.
Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Click: Heading moves from normal to absolute position and paragraphs move up because the space absolutely positioned element took up is ignored

10. CONTROLLING THE POSITION OF ELEMENTS Lorem Ipsum FIXED POSITIONING
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc.
Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti.
Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Click: Background paragraph moves, but the heading stays in the same place
Lorem Ipsum

11. CONTROLLING THE POSITION OF ELEMENTS Lorem Ipsum FIXED POSITIONING
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc.
Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti.
Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Background paragraph moves, but the heading stays in the same place
Lorem Ipsum

12. CONTROLLING THE POSITION OF ELEMENTS Lorem Ipsum FLOATING ELEMENTS
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nullam
sodales pretium ipsum. Etiam ut enim
augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc.
Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti.
Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Lorem Ipsum
NO Click on this example

13. NORMAL FLOW position: static
body { width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;} h1 { background-color: #efefef; padding: 10px;} p { width: 450px;}
Instructor note: first of code examples implement concepts just shown

15. RELATIVE POSITIONING position: relative
p.example { position: relative; top: 10px; left: 100px;}

16. RELATIVE POSITIONING position: relative
p.example { position: relative; top: 10px; left: 100px;}

17. RELATIVE POSITIONING position: relative
p.example { position: relative; top: 10px; left: 100px;}

19. ABSOLUTE POSITIONING position: absolute
h1 { position: absolute; top: 0px; left: 500px; width: 250px;} p { width: 450px;}

20. ABSOLUTE POSITIONING position: absolute
h1 { position: absolute; top: 0px; left: 500px; width: 250px;} p { width: 450px;}

21. ABSOLUTE POSITIONING position: absolute
h1 { position: absolute; top: 0px; left: 500px; width: 250px;} p { width: 450px;}

22. ABSOLUTE POSITIONING position: absolute
h1 { position: absolute; top: 0px; left: 500px; width: 250px;} p { width: 450px;}

23. ABSOLUTE POSITIONING position: absolute
h1 { position: absolute; top: 0px; left: 500px; width: 250px;} p { width: 450px;}

25. FIXED POSITIONING position: fixed
h1 { position: fixed; top: 0px; left: 0px; padding: 10px; margin: 0px; width: 100%; background-color: #efefef;} p.example { margin-top: 100px;}

26. FIXED POSITIONING position: fixed
h1 { position: fixed; top: 0px; left: 0px; padding: 10px; margin: 0px; width: 100%; background-color: #efefef;} p.example { margin-top: 100px;}

27. FIXED POSITIONING position: fixed
h1 { position: fixed; top: 0px; left: 0px; padding: 10px; margin: 0px; width: 100%; background-color: #efefef;} p.example { margin-top: 100px;}

28. FIXED POSITIONING position: fixed
h1 { position: fixed; top: 0px; left: 0px; padding: 10px; margin: 0px; width: 100%; background-color: #efefef;} p.example { margin-top: 100px;}
Note: Using margin-top ensures content appears below heading

30. OVERLAPPING ELEMENTS z-index
h1 { position: fixed; top: 0px; left: 0px; margin: 0px; padding: 10px; width: 100%; background-color: #efefef; z-index: 10;} p { position: relative; top: 70px; left: 70px;}

31. OVERLAPPING ELEMENTS z-index
h1 { position: fixed; top: 0px; left: 0px; margin: 0px; padding: 10px; width: 100%; background-color: #efefef; z-index: 10;} p { position: relative; top: 70px; left: 70px;}

33. FLOATING ELEMENTS float
blockquote { float: right; width: 275px; font-size: 130%; font-style: italic; font-family: Georgia, Times, serif; margin: 0px 0px 10px 10px; padding: 10px; border-top: 1px solid #665544; border-bottom: 1px solid #665544;}
Note: This example also uses text and border to change the appearance of blockquote

34. FLOATING ELEMENTS float
blockquote { float: right; width: 275px; font-size: 130%; font-style: italic; font-family: Georgia, Times, serif; margin: 0px 0px 10px 10px; padding: 10px; border-top: 1px solid #665544; border-bottom: 1px solid #665544;}
Possible values: left, right, none

35. FLOATING ELEMENTS float
blockquote { float: right; width: 275px; font-size: 130%; font-style: italic; font-family: Georgia, Times, serif; margin: 0px 0px 10px 10px; padding: 10px; border-top: 1px solid #665544; border-bottom: 1px solid #665544;}

37. ELEMENTS SIDE-BY-SIDE
USING FLOAT TO PLACE
ELEMENTS SIDE-BY-SIDE
body { width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;} p { float: left; width: 230px; margin: 5px; padding: 5px; background-color: #efefef;}

38. ELEMENTS SIDE-BY-SIDE
USING FLOAT TO PLACE
ELEMENTS SIDE-BY-SIDE
body { width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;} p { float: left; width: 230px; margin: 5px; padding: 5px; background-color: #efefef;}

39. ELEMENTS SIDE-BY-SIDE
USING FLOAT TO PLACE
ELEMENTS SIDE-BY-SIDE
body { width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;} p { float: left; width: 230px; margin: 5px; padding: 5px; background-color: #efefef;}

40. ELEMENTS SIDE-BY-SIDE
USING FLOAT TO PLACE
ELEMENTS SIDE-BY-SIDE
body { width: 750px; font-family: Arial, Verdana, sans-serif; color: #665544;} p { float: left; width: 230px; margin: 5px; padding: 5px; background-color: #efefef;}

42. CLEARING FLOATS
clear
p { width: 230px; float: left; margin: 5px; padding: 5px; background-color: #efefef;} .clear { clear: left;}

43. CLEARING FLOATS
clear
p { width: 230px; float: left; margin: 5px; padding: 5px; background-color: #efefef;} .clear { clear: left;}
Possible values: left, right, none

45. PARENTS OF FLOATED ELEMENTS: PROBLEM PROBLEM
div { border: 1px solid #665544;}
Illustrates problem: If parent / container element only contains floated elements, treated as if zero pixels tall

47. PARENTS OF FLOATED ELEMENTS: SOLUTION SOLUTION
div { border: 1px solid #665544; overflow: auto; width: 100%;}

48. PARENTS OF FLOATED ELEMENTS: SOLUTION SOLUTION
div { border: 1px solid #665544; overflow: auto; width: 100%;}

49. PARENTS OF FLOATED ELEMENTS: SOLUTION SOLUTION
div { border: 1px solid #665544; overflow: auto; width: 100%;}
Note: Width is 100% on the containing element

51. CREATING MULTI-COLUMN LAYOUTS WITH FLOAT
.column1of2 { float: left; width: 620px; margin: 10px;} .column2of2 { float: left; width: 300px; margin: 10px;}

52. CREATING MULTI-COLUMN LAYOUTS WITH FLOAT
.column1of2 { float: left; width: 620px; margin: 10px;} .column2of2 { float: left; width: 300px; margin: 10px;}

53. CREATING MULTI-COLUMN LAYOUTS WITH FLOAT
.column1of2 { float: left; width: 620px; margin: 10px;} .column2of2 { float: left; width: 300px; margin: 10px;}

54. CREATING MULTI-COLUMN LAYOUTS WITH FLOAT
.column1of2 { float: left; width: 620px; margin: 10px;} .column2of2 { float: left; width: 300px; margin: 10px;}
Note: Margin is on both sides

56. THREE COLUMNS
.column1of3, .column2of3, .column3of3 { width: 300px; float: left; margin: 10px;}
Explain: to create three equal column layout only need one rule

58. SCREEN SIZE & RESOLUTION
NO Click on this example (automatically fades between screen sizes)

59. SCREEN SIZE & RESOLUTION
NO Click on this example (automatically fades between screen sizes)

60. SCREEN SIZE & RESOLUTION
NO Click on this example (automatically fades between screen sizes)

61. SCREEN SIZE & RESOLUTION
NO Click on this example (automatically fades between screen sizes)

62. PAGE SIZES
Note: term used is above the fold

63. FIXED WIDTH LAYOUTS Lorem Ipsum
Lorem Ipsum Dolor Consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc. Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti. Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Arrows indicate space to left and right of the layout
Suspendisse potenti. Duis in erat neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aute irure dolor in reprehenderit in velit esse cillum dolore eu fugiat nulla pariatur.

64. LIQUID LAYOUTS Lorem Ipsum Layout stretches to fill entire container
Lorem Ipsum Dolor Consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales pretium ipsum. Etiam ut enim augue. Etiam mi tortor, pulvinar at dictum faucibus, mollis eget nunc. Morbi justo velit, rutrum vel placerat in, adipiscing vitae sapien. Vivamus sit amet lacus enim, vel scelerisque justo. Nunc dignissim vehicula urna ac porta. Suspendisse potenti. Praesent nisi dolor, ornare quis sodales id, lacinia ut mauris.
Layout stretches to fill entire container
Suspendisse potenti. Duis in erat neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aute irure dolor in reprehenderit in velit esse cillum dolore eu fugiat nulla pariatur.

65. FIXED WIDTH LAYOUT
body { width: 960px; margin: 0 auto;} .column1, .column2, .column3 { background-color: #efefef; width: 300px; float: left; margin: 10px;}

66. FIXED WIDTH LAYOUT
body { width: 960px; margin: 0 auto;} .column1, .column2, .column3 { background-color: #efefef; width: 300px; float: left; margin: 10px;}

68. LIQUID LAYOUT body { width: 90%; margin: 0 auto;}
.column1, .column2, .column3 { width: 31.3%; float: left; margin: 1%;} .column3 {
margin-right: 0%;}

69. LIQUID LAYOUT body { width: 90%; margin: 0 auto;}
.column1, .column2, .column3 { width: 31.3%; float: left; margin: 1%;} .column3 {
margin-right: 0%;}

71. LAYOUT GRIDS WHO USES THEM WHAT THEY DO CONTINUITY
Long tradition of use in print design
More recently became very popular for web designers too
Help make pages look professional
Help designers position items on each page
Set consistent proportions between items
Grids help create continuity between:
Different pages
New content
Multiple designers
Helps users predict where info will be on a page
Fade in: who uses them
Click: what they do
Click: continuity

72. EXAMPLE GRID 960 PIXELS WIDE Click: shows width of page
Click: shows grid overlay
Click: grid fades down
Background page scrolls up (shows more column options)

73. EXAMPLE GRID 960 PIXELS WIDE Click: shows width of page
Click: shows grid overlay
Click: grid fades down
Background page scrolls up (shows more column options)

74. POSSIBLE LAYOUTS IN 960px GRID (12 COLUMNS)
Click: different column widths appear
300 px
220 px
140 px

75. COMBINATIONS USING 960 PIXEL GRID (12 COLUMNS)
620 px
300 px
540 px
380 px
Click: potential combinations to create layouts appear
460 px
220 px
300 px
140 px
220 px
140 px

76. CSS FRAMEWORKS WHAT THEY DO ADVANTAGES DISADVANTAGES
Provide CSS for common tasks
Layout grids
Styling forms
Print-friendly pages
Saves you repeating the same code
Have been tested across multiple browsers
Often require class names in the HTML
To satisfy wide requirements will contain unused styles (bloat)
Fade in: what they do
Click: advantages
Click: disadvantages

77. POSSIBLE LAYOUTS IN 960px GRID (12 COLUMNS)
HEADER
940 px
NAVIGATION
940 px
FEATURED PANEL
Click: slides in a commonly used grid
Shows widths for each of these boxes
300 px
CONTENT
300 px
CONTENT
300 px
CONTENT
940 px
FOOTER

78. SAMPLE GRID LAYOUT
<head> <title>Grid Layout</title> <link rel="stylesheet" type="text/css" href="css/960_12_col.css" /> </head> <body>... <div id="feature" class="grid_12"> <p>Feature</p> </div> <div class="article grid_4">Col 1</div> <div class="article grid_4">Col 2</div> <div class="article grid_4">Col 3</div>

79. SAMPLE GRID LAYOUT
<head> <title>Grid Layout</title> <link rel="stylesheet" type="text/css" href="css/960_12_col.css" /> </head> <body>... <div id="feature" class="grid_12"> <p>Feature</p> </div> <div class="article grid_4">Col 1</div> <div class="article grid_4">Col 2</div> <div class="article grid_4">Col 3</div>

80. SAMPLE GRID LAYOUT
<head> <title>Grid Layout</title> <link rel="stylesheet" type="text/css" href="css/960_12_col.css" /> </head> <body>... <div id="feature" class="grid_12"> <p>Feature</p> </div> <div class="article grid_4">Col 1</div> <div class="article grid_4">Col 2</div> <div class="article grid_4">Col 3</div>

81. SAMPLE GRID LAYOUT
<head> <title>Grid Layout</title> <link rel="stylesheet" type="text/css" href="css/960_12_col.css" /> </head> <body>... <div id="feature" class="grid_12"> <p>Feature</p> </div> <div class="article grid_4">Col 1</div> <div class="article grid_4">Col 2</div> <div class="article grid_4">Col 3</div>

82. SAMPLE GRID LAYOUT
*{ color: #665544; text-align: center;} font-family: Arial, Verdana, sans-serif; #nav, #feature, .article, #footer { background-color: #efefef; margin-top: 20px; padding: 10px 0px 5px 0px;} #feature, .article { height: 100px;} li { display: inline; padding: 5px;}
Note: style sheet does not require layout instructions

84. MULTIPLE STYLE SHEETS @import
<link rel="stylesheet" type="text/css" href="css/styles.css" /> @import url("typography.css"); body { color: #666666; background-color: #f8f8f8; text-align: center;} ...

85. MULTIPLE STYLE SHEETS @import
<link rel="stylesheet" type="text/css" href="css/styles.css" /> @import url("typography.css"); body { color: #666666; background-color: #f8f8f8; text-align: center;} ...
Note: rule would be in the stylesheet

86. MULTIPLE STYLE SHEETS <link>
<link rel="stylesheet" type="text/css" href="css/site.css" /> <link rel="stylesheet" type="text/css" href="css/tables.css" /> <link rel="stylesheet" type="text/css" href="css/typography.css" />
Multiple link elements in the HTML

87. SUMMARY
<div> elements are often used as containing elements to group together sections of a page.
Clicks: Load individual bullets

88. SUMMARY
Browsers display pages in normal flow unless you specify relative, absolute, or fixed positioning.
Clicks: Load individual bullets

89. SUMMARY
The float property moves content to the left or right of the page and can be used to create multi-column layouts. (Floated items require a defined width.)
Clicks: Load individual bullets

90. Pages can be fixed width or liquid (stretchy) layouts.
SUMMARY
Pages can be fixed width or liquid (stretchy) layouts.
Clicks: Load individual bullets

91. SUMMARY
Designers often keep pages pixels wide, and indicate what the site is about within the top 600 pixels (to demonstrate its relevance without scrolling).
Clicks: Load individual bullets

92. Grids help create designs that look professional and are flexible.
SUMMARY
Grids help create designs that look professional and
are flexible.
Clicks: Load individual bullets

93. CSS Frameworks provide rules for common tasks.
SUMMARY
CSS Frameworks provide rules for common tasks.
Clicks: Load individual bullets

94. You can include multiple CSS files in one page.
SUMMARY
You can include multiple CSS files in one page.
Clicks: Load individual bullets