reading-notes

Reading Notes for Codefellows!

---

Project maintained by AlanYHung Hosted on GitHub Pages — Theme by mattgraham

Code 201

Reading 08

(All My Notes are attributed/sourced from the Resources directly preceding them.)

HTML & CSS

Layout (pp. 358-404)

• Repeat of Class 04 Reading 04
• Building Blocks
  1. Block-Level Elements Start on a new line.
  2. Inline Elements flow in between surrounding text.
• Positioning Schemes
  1. Normal Flow
  2. Relative Positioning - moves an element from the normal flow and shifts it top, right, bottom, or left
  3. Absolute Positioning - does not affect the positioning of any of the surrounding elements
  4. Fixed Positioning - places object in relation to browser window over the position of any internal elements
  5. Floating Elements - removes element from normal flow and can be placed to the far left or far right
• Fixed Width Layouts
  • Advantages
    • Pixel values are accurate and controle the size and positioning of the elements
    • Designer has greater control over how a page looks
    • Text line lengths can be controlled
    • An Image size will always stay the same (retains picture quality)
  • Disadvantages
    • Depending the the user’s Window, the Page may end up with big gaps around the edges
    • If User resolution is higher, the page will look smaller and may be harder to read
    • If User changes font size, Text may not fit in allotted spaces
    • Page will take up more vertical space than a liquid layout
• Liquid Layouts
  • Advantages
    • Pages expand to fill up the entire browser window
    • The page can adjust itself to the User’s Browser/Computer Settings
    • Pages are not affected by User Font Sizes
  • Disadvantages
    • Site may not look as intended in Design based on the settings of the computer/device viewing site
    • Based on user Window Size sentences to become too long or too short, making it hard to read
    • images can end up overflowing into text if the window is smaller than picture size

<– Back