Midterm Quiz

float example

Floats

Instructions:

  1. Give section "wrapper" a 700 pixel width and center it. Hint. The section is a block element, so text-align: center; does not work.
  2. Add a 3 pixel grey border on the bottom of the header tag.
  3. Display the menu horizontally across the page.
  4. Kill the padding on the unordered list in navigation (introduced after the reset)
  5. Remove the underline from the links and color them white. Color background a dark color.
  6. Give links a 10 pixel margins, 10px 20px padding and set their display to inline-block.
  7. Style the hover green.
  8. The left and right columns are to be exactly 150 pixels wide. Color the background "silver".
  9. The center column is to be 400 pixels wide and the background is colored #ddd;.
  10. Using floats, position the three content boxes so that the web page is a 3 column layout.
  11. Add 20 pixel padding to all columns. Hint. All columns are divs.

Make the float layout responsive.

  1. Display the navigation list items as blocks.
  2. Set the width of the navigation links to 100% and center the text.
  3. When the screen goes below 700 pixels engage media queries — @media screen and (max-width: 700px) {}
  4. Make column width 100%. This stacks the floats.
  5. Add 10 pixel padding to the sides of all section elements.

Right column

Part 2

Display Header

Display Table

Display Table

Instructions:

  1. Keep the width and background color of the columns from above.
  2. Using the display property, turn these three content boxes into table-columns to create the same three column layout.
  3. Hint. Display the container as a table and the three columns as table cells.

Make the layout responsive.

  1. When the screen goes below 600 pixels engage media queries — @media screen and (max-width: 600px) {}
  2. Target the columns and their container. Set their display to block. That didn't do anything when I tried so added some persuasion. !important did the trick.

Right column

Part 3

Grid header

Grid Property

  1. Target the section with the class "gid" and display it as a grid with a 10 pixel grid-gap.
  2. Put 50 pixels of margin on each side.
  3. Select all elements inside of class grid and make the background silver, padding at 20 pixels, a 20 pixel margin on either side, and set the border-radius to 5 pixels;
  4. Target the class header and set display to flex.
  5. Target the h1 inside the header and give it auto margins.
  6. put 1em of padding at the bottom of headings and paragraphs.

Make the grid responsive. This is going the opposite direction.

  1. Set a media query to activate when viewport is wider than 500 pixels — @media screen and (min-width: 500px) {}
  2. increase margin to 50 pixels on each side.
  3. Made grid horizontal with two grid flex units. Set the first to 1 and the second to 3 — grid-template-columns: 1fr 3fr;
  4. Set the header and footer to span both columns — grid-column: 1 / -1;
  5. That should do it.