15 Layout

15 LayoutControlling the position of elementsCreating site layoutsDesigning for different sized screensto 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 floatshow 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 createduse grids to make your page designs look more professional.Key Concepts in Positioning ElementsCSS 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 lineExamples include:

Inline elements flow in between surrounding textExamples include: BoxenBlock-level elementsBoxesInline elementsContaining ElementsIf one block-level element sits inside another block-level element then the outer box is known as the containing or parent element.Controlling thePosition of ElementsCSS has the following positioning schemesNormal flowRelative PositioningAbsolute positioningPosition of Elements Normal Relative Absolutebox offset properties Fixed Positioning Floating ElementsNormal flowposition:staticchapter-15/normal-flow.htmlRelative Positioningposition:relativechapter-15/position-relative.htmlAbsolute positioningposition:absolutAbsolute positioningposition:absolutechapter-15/position-absolute.htmlFixed positionposition:fixedchapter-15/position-fixed.htmlOverlapping elementsz-indexchapter-15/z-index.htmlFloating elementsFloatchapter-15/float.htmldUsing float to place elements side by sidechapter-15/using-float.htmlClearing floatsClearchapter-15/clear.htmlParents of floated elements Problem & solutionchapter-15/float-problem.htmlchapter-15/float-solution.htmlCreating multi-column layouts with floatsWidthFloatMarginchapter-15/columns-two.htmlchapter-15/columns-three.htmlScreen Sizesdesigning for the web, you are faced with the unique challenge that different users will have different sized screens.Screen SizesPage Sizesdesigners often try to create pages of around 960-1000 pixels wideFixed Width LayoutsFixed width layout designs do not change size as the user increases or decreases the size of their browser window.Liquid Layoutsstretch and contract as the user increases or decreases the size of their browser windowFixed Width layoutLiquid Layoutchapter-15/fixed-width-layout.htmlchapter-15/liquid-layout.htmlLayout Gridsuse a grid structure to help them position items on a page, and the same is true for web designersUsing the 960.GS Gridchapter-15/grid-layout.htmlMulitiple Style Sheets@importchapter-15/multiple-style-sheets-import.htmllinkchapter-15/multiple-style-sheets-link.htmlSummary elements are often used as containing elements to group together sections of a pageBrowsers display pages in normal flow unless you specify relative, absolute, or fixed positioningThe 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) layoutsSummaryDesigners 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 designsCSS Frameworks provide rules for common tasksYou can include multiple CSS files in one page