Skip to content

Latest commit

 

History

History
30 lines (27 loc) · 2.29 KB

class-08.md

File metadata and controls

30 lines (27 loc) · 2.29 KB
Raw

Read: 08 -CSS

Layout

  • WHY? ayout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.

  • Controlling the Position of Elements :allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning.

  • positioning schemes: 1. Normal flow: each item to appear lower down the page position:static 2. Relative Positioning: shifting it to the top, right, bottom, or left of where it position:relative 3. Absolute positioning: ignore the space it would have taken up, top right, and the paragraphs start at the top of the screen position:absolute 4. Fixed Positioning:stays in the exact same place. position:fixed 5. Floating Elements : float: right;; clear;left;;none;both 6. Overflapping elements: z-index

    • Creating Multi-Column Layouts with Floats: width; float; margin.
    • Screen Sizes
      • Different visitors to your site will have different sized screens that show different amounts of information, so your design needs to be able to work on a range o different sized screens.
      • Screen Resolution: the number of dots a screen shows per inch. Some devices have a higher resolution than desktop computers and most operating systems allow users to adjust the resolution of their screens
      • Page Sizes : screen sizes and display resolutions vary so much.
        1. Fixed Width Layouts: designs do not change size as the user increases or decreases the size of their browser window. Measurements tend to be given in pixels.
        2. Liquid Layouts: stretch and contract as the user increases or decreases the size of their browser window.
    • Layout Grids:
      • WHAT? Grids set consistent proportions and spaces between items
      • WHY? helps to create a professional looking design.
    • CSS Frameworks
      • WHY ?
      • They save you from repeatedly writing code for the same tasks.
      • They will have been tested across different browser versions (which helps avoid browser bugs).

Resources :

HTML/CSS book, Ch. 15, “Layout”