1. Slide 1

2. Murach's HTML5 and CSS3, C6 Slide 2 Layout Control is a critical issue in any website/pages design. Traditionally and conveniently (but not satisfactorily) done with and Supported by all browsers Discouraged now! Multiple pages made messy with “back” button Tables were also used to control positioning of elements Discouraged now also! This lecture addresses modern ways of layout control using CSS styles, and new tags of HTML5 –Have a quick look at HTML5 new tagsHTML5 new tags

3. Murach's HTML5 and CSS3, C6Slide 3

4. Murach's HTML5 and CSS3, C6 Slide 4 Default “flowing” of doc/page elements Block element flow from the top to the bottom Inline elements flow from left to right side of their enclosing block elements For layout control, this default flow need be manipulated by using the follow two style properties: Float: causes an element to float to left or right Clear: requires the left, right or both sides of a floated element clear – stop subsequent element flowing into these spaces.

5. Murach's HTML5 and CSS3, C6Slide 5

6. Murach's HTML5 and CSS3, C6Slide 6

7. Murach's HTML5 and CSS3, C6Slide 7

8. Murach's HTML5 and CSS3, C6Slide 8

9. Murach's HTML5 and CSS3, C6Slide 9

10. Murach's HTML5 and CSS3, C6Slide 10

11. Murach's HTML5 and CSS3, C6Slide 11

12. Murach's HTML5 and CSS3, C6Slide 12

13. Murach's HTML5 and CSS3, C6Slide 13

14. Murach's HTML5 and CSS3, C6Slide 14

15. Murach's HTML5 and CSS3, C6Slide 15

16. Murach's HTML5 and CSS3, C6Slide 16

17. Murach's HTML5 and CSS3, C6Slide 17

18. Murach's HTML5 and CSS3, C6Slide 18

19. Murach's HTML5 and CSS3, C6Slide 19

20. Murach's HTML5 and CSS3, C6Slide 20

21. Murach's HTML5 and CSS3, C6Slide 21

22. Murach's HTML5 and CSS3, C6Slide 22

23. Murach's HTML5 and CSS3, C6Slide 23

24. Murach's HTML5 and CSS3, C6Slide 24

25. Murach's HTML5 and CSS3, C6Slide 25

26. Murach's HTML5 and CSS3, C6Slide 26

27. Murach's HTML5 and CSS3, C6Slide 27

28. Murach's HTML5 and CSS3, C6Slide 28

29. Murach's HTML5 and CSS3, C6Slide 29

30. Murach's HTML5 and CSS3, C6Slide 30 Note: Firefox requires the –moz- prefix, Chrome and Safari require the –webkit- prefix.

31. Murach's HTML5 and CSS3, C6Slide 31

32. Murach's HTML5 and CSS3, C6Slide 32

33. Murach's HTML5 and CSS3, C6Slide 33

34. Murach's HTML5 and CSS3, C6Slide 34

35. Murach's HTML5 and CSS3, C6Slide 35

36. Murach's HTML5 and CSS3, C6Slide 36

37. Murach's HTML5 and CSS3, C6Slide 37

38. Murach's HTML5 and CSS3, C6Slide 38

39. Murach's HTML5 and CSS3, C6Slide 39

40. Murach's HTML5 and CSS3, C6Slide 40

41. Murach's HTML5 and CSS3, C6Slide 41

42. Murach's HTML5 and CSS3, C6Slide 42

43. Murach's HTML5 and CSS3, C6Slide 43

44. Murach's HTML5 and CSS3, C6Slide 44

45. Murach's HTML5 and CSS3, C6Slide 45

46. Murach's HTML5 and CSS3, C6Slide 46

47. Murach's HTML5 and CSS3, C6Slide 47