Slide 1

15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens Slide 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. Slide 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: Slide 4 BOXEN Block-level elements Slide 5 BOXES Inline elements Slide 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. Slide 7 CONTROLLING THE POSITION OF ELEMENTS CSS has the following positioning schemes Normal flow Relative Positioning Absolute positioning Slide 8 POSITION OF ELEMENTS Normal Relative Absolute Slide 9 BOX OFFSET PROPERTIES Fixed Positioning Floating Elements Slide 10 NORMAL FLOW position:static chapter-15/normal-flow.html Slide 11 RELATIVE POSITIONING position:relative chapter-15/position-relative.html Slide 12 ABSOLUTE POSITIONING position:absolut Slide 13 ABSOLUTE POSITIONING position:absolute chapter-15/position-absolute.html Slide 14 FIXED POSITION position:fixed chapter-15/position-fixed.html Slide 15 OVERLAPPING ELEMENTS z-index chapter-15/z-index.html Slide 16 FLOATING ELEMENTS Float chapter-15/float.htmld Slide 17 USING FLOAT TO PLACE ELEMENTS SIDE BY SIDE chapter-15/using-float.html Slide 18 CLEARING FLOATS Clear chapter-15/clear.html Slide 19 PARENTS OF FLOATED ELEMENTS PROBLEM & SOLUTION chapter-15/float-problem.html chapter-15/float-solution.html Slide 20 CREATING MULTI-COLUMN LAYOUTS WITH FLOATS Width Float Margin chapter-15/columns-two.html chapter-15/columns-three.html Slide 21 SCREEN SIZES designing for the web, you are faced with the unique challenge that different users will have different sized screens. Slide 22 SCREEN SIZES Slide 23 PAGE SIZES designers often try to create pages of around 960-1000 pixels wide Slide 24 FIXED WIDTH LAYOUTS Fixed width layout designs do not change size as the user increases or decreases the size of their browser window. Slide 25 LIQUID LAYOUTS stretch and contract as the user increases or decreases the size of their browser window Slide 26 FIXED WIDTH LAYOUT LIQUID LAYOUT chapter-15/fixed-width-layout.html chapter-15/liquid-layout.html Slide 27 LAYOUT GRIDS use a grid structure to help them position items on a page, and the same is true for web designers Slide 28 USING THE 960.GS GRID chapter-15/grid-layout.html Slide 29 MULITIPLE STYLE SHEETS @import chapter-15/multiple-style-sheets-import.html link chapter-15/multiple-style-sheets-link.html Slide 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 Slide 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