left right

Class Friday, November 20, 2015

 Today’s goals:

  • Continue practicing with absolute and fixed positioning

 Today’s featured website:

 Continued from yesterday

  • Instructions on how to set up your page are here (scroll about halfway down the page)
  • Work with the person next to you to find errors in each others’ pages.
  • If you’re really stuck, compare your code to this.
  • When your page looks like this:

    • Grab the first paragraph from here and copy and paste it below left in your HTML.
    • Add that same paragraph in your right section. What happened to the height of both sections?
    • Now, go into your style sheet and change the height of the right section from auto to 100px. What happened?
    • Add this line of code to your style sheet in the right section- overflow:hidden (that’s the word overflow followed by a colon followed by the word hidden; no space in between anything). What happened? What if you remove that line or change hidden to visible?
  • Let’s pause and think/discuss for a second: why does the header have a z-index of 2 (hint-scroll to see what happens). Why do the left and right sections have a top margin of 85px? Why do the left and right sections have page widths as percentages? What does height:auto mean?
  • The widths of the sections and their margins are in percentages. What does this mean in relation to the size of the whole page?
  • Shrink your browser window by dragging in the corners. What happens to the text in the right and left sections? Why? Does this make you think of anything and/or could this be helpful in some way? Why?