reading-notes

Layouts

CSS treats each HTML element as if it is in a box

• block level elements start on new line
• inline elements flow in between surrounding text
• containing elements outter box with another box in it
• positioning schemes
  • normal flow position:static
  • relative positioning position:relative
  • absolute positioning absolute:position
• box offset
  • fixed positioning position:fixed
  • floating elements float
    • clear
    • left
    • right
    • both
    • none
    • multi-coloumn layout

      .coloumn {
        float: left;
        width: 500px;
        margin: 10px;
      }
      

  • screen sizes design needs to work on a range of sizes
  • screen resolution number of dots a screen shows
  • page sizes try to create pages around 960 - 1000 px wide
  • fixed width layouts do not change with window size
  • liquid layouts stretch and contract with window size
  • layout grids grid structure to help position items on page, how they are organized
  • CSS frameworkds provides code for common tasks, already written
  • multiple style sheets @import HTML element links to one style sheet, that sheet uses @import to connect to other style sheets
  • multiple style sheets <link rel="stylesheet" type="text/css" href="cssLink"/>

Home