Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens."— Presentation transcript:

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 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  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 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


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

Similar presentations


Ads by Google