1. 15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens

2. TO CONTROL WHERE EACH ELEMENT SITS ON A PAGE AND HOW TO CREATE ATTRACTIVE PAGE LAYOUTS.  different ways to position elements using normal flow, relative positioning, absolute positioning and floats  how various devices have different screen sizes and resolution, and how this affects the design process.  difference between fixed width and liquid layouts, and how they are created  use grids to make your page designs look more professional.

3. KEY CONCEPTS IN POSITIONING ELEMENTS  CSS treats each HTML element as if it is in its own box. This box will either be a block-level box or an inline box.  Block-level elements start on a new line  Examples include:  Inline elements flow in between surrounding text  Examples include:

4. BOXEN  Block-level elements

5. BOXES  Inline elements

6. CONTAINING ELEMENTS  If one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.

7. CONTROLLING THE POSITION OF ELEMENTS  CSS has the following positioning schemes  Normal flow  Relative Positioning  Absolute positioning

8. POSITION OF ELEMENTS  Normal Relative Absolute

9. BOX OFFSET PROPERTIES Fixed Positioning Floating Elements

10. NORMAL FLOW  position:static  chapter-15/normal-flow.html

11. RELATIVE POSITIONING  position:relative  chapter-15/position-relative.html

12. ABSOLUTE POSITIONING  position:absolut

13. ABSOLUTE POSITIONING  position:absolute  chapter-15/position-absolute.html

14. FIXED POSITION  position:fixed  chapter-15/position-fixed.html

15. OVERLAPPING ELEMENTS  z-index  chapter-15/z-index.html

16. FLOATING ELEMENTS  Float  chapter-15/float.htmld

17. USING FLOAT TO PLACE ELEMENTS SIDE BY SIDE  chapter-15/using-float.html

18. CLEARING FLOATS  Clear chapter-15/clear.html

19. PARENTS OF FLOATED ELEMENTS PROBLEM & SOLUTION  chapter-15/float-problem.html  chapter-15/float-solution.html

20. CREATING MULTI-COLUMN LAYOUTS WITH FLOATS  Width  Float  Margin  chapter-15/columns-two.html  chapter-15/columns-three.html

21. SCREEN SIZES  designing for the web, you are faced with the unique challenge that different users will have different sized screens.

22. SCREEN SIZES

23. PAGE SIZES  designers often try to create pages of around 960-1000 pixels wide

24. FIXED WIDTH LAYOUTS  Fixed width layout designs do not change size as the user increases or decreases the size of their browser window.

25. LIQUID LAYOUTS  stretch and contract as the user increases or decreases the size of their browser window

26. FIXED WIDTH LAYOUT LIQUID LAYOUT  chapter-15/fixed-width-layout.html  chapter-15/liquid-layout.html

27. LAYOUT GRIDS  use a grid structure to help them position items on a page, and the same is true for web designers

28. USING THE 960.GS GRID chapter-15/grid-layout.html

29. MULITIPLE STYLE SHEETS  @import  chapter-15/multiple-style-sheets-import.html  link  chapter-15/multiple-style-sheets-link.html

30. SUMMARY  elements are often used as containing elements to group together sections of a page  Browsers display pages in normal flow unless you specify relative, absolute, or fixed positioning  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.)  Pages can be fixed width or liquid (stretchy) layouts

31. SUMMARY  Designers keep pages within 960-1000 pixels wide, and indicate what the site is about within the top 600 pixels (to demonstrate its relevance without scrolling).  Grids help create professional and flexible designs  CSS Frameworks provide rules for common tasks  You can include multiple CSS files in one page