Lecture 5   Class Activities for CSS

CSS Exercise 1

In the following exercise, we are going to try to convert this initial page into this final page. Here are side-by-side screenshots:

Before, no CSS After, lots of CSS

Using this JSfiddle on CSS, do the following:

  1. make the h1, h2, and h3 elements maroon.
  2. Put a maroon box around the nav and make the background color be tan.
  3. Make the background color for the body be maroon. Make the background color for the inner part be wheat. Make that inner part 600px wide and center it.
  4. Make the image in the introduction be 150px wide, with a 15px right margin.
  5. The text is too close to the maroon background. Give it 10px of padding.
  6. Style the weeks:
    • Make the background color of each be tan.
    • Give them a 2px solid maroon border.
    • Give them some reasonable margin and padding.
  7. Make optional stuff maroon.
  8. Make the header have a 4px double maroon border, but only -top and -bottom, not -left and -right. Make the background color be tan.
  9. Style the links in the nav: none should have underlines (text-decoration). The unvisited links should be maroon, the visited ones navy and hovering should make them white.
  10. What would be better markup for the author photos?
  11. Don't kill this jsfiddle when you're done. Later, we'll learn how to do this final page

Page Layout Summary

Here are the main points from the reading:

  • layouts can be fixed or liquid. The former is usually easier but not as nice on a wide variety of displays
  • Techniques include floats and absolute positioning. Floats are usually easier.
  • Specifying that an element is float: left means that text from below it can move up next to it (to its right, in this example).
  • There is no float: center.
  • Two column layouts usually have one thing floating in the margin of the other thing.
  • If you don't want an element coming up next to a float, you can use clear:left on that element.
  • Floats can sometimes stick out of their containers. They do not contribute to the height of their containers. Can be solved by either:
    • Putting in a non-floated element and using clear, or
    • using overflow:hidden on the container (worst-named property ever)
  • position:absolute sets up a 2D coordinate system relative to some element -- the window if all else fails.
  • You can say position:relative to set the location of the coordinate system.
  • You can use left and top (or right and bottom) to position an element in the 2D system.
  • position:fixed can be nice sometimes.

Quiz Question Nr. 1

Float means

  1. Other block elements flow around me

  2. Other inline elements flow around me

  3. I flow around other block elements

  4. I flow around other inline elements

Quiz Question Nr. 2

Clear means

  1. stop floating

  2. Move other stuff below me

  3. Move me below non-floating elements

  4. Move me below floating elements

Exercise 2: Fixed-width and floating images

You are given this ex1. Resize the browser window. Notice what happens to the text and the images. Then, using the Inspector window do the following:

  1. Apply styling to the body element to center the page, give it a width of 960px and change the background to lightgray. Resize the window again. What happens to the text and the images.
  2. Apply styling to the img elements to float them on the right side.
  3. Can you guess without looking at the source code why ex1 looks different from ex3. Write your answer down, and then look at the code of each page to check if you're correct.
  4. Apply styling to the figure element of ex3_1 to make it look like ex4.
  5. This file, ex2 is the solution for items 1 and 2 of the list. Do you think that it looks different from ex4_1? If so, in what ways and why?

Exercise 1 continued

Go back to the jsfiddle from exercise 1 and do the final touches:

  • float the NAV to the right
  • Have the intro text flow around the picture of the books
  • Put the week description text next to the author pictures.

Exercise 3: Layout with columns

  1. Starting with this page, add styling to the appropriate elements in order to create the two-column layout shown in this page.
  2. Starting with this page, add styling to the appropriate elements in order to create the three-column layout shown in this page.

Exercise 4: Float problems

  1. Explain what is wrong with this page and why? Hint: Use the Inspect Element window as an investigating tool (highlight the different elements to look at their size).
  2. What can you do to fix this problem, so that the page looks like this one.
  3. Try to predict if setting the margin-top property for the footer element would push that element down. Is your prediction correct?
  4. Finally, what can you do so that you turn this page into this one?

Advanced Challenge

All previous activites were explained in the reading and the solutions are given. If you completed them quickly, here is a challenge that you haven't encountered before. By adding only one new container element to the last version of Hunger Games file and applying some styling to the different elements of the page, make it look like this image. Don't worry about matching the colors, go for the layout. We'll post the solution after class.

Exercise 5: Positioning

  1. Can you explain what is the difference between the styles: position: absolute and position: fixed?
  2. Given this page version, how can you change the CSS code to make it look like this page? Scroll the page to see what happens to the image.
  3. By making one very small change in the CSS file, how can you turn the last example into looking like this example. Scroll the page down to see the difference.

Solutions

Will be posted later, visit again after .