WDD 100 positioning exercises

For each activity match make the boxes match the image by modifying the stylesheet.

Activity 1

Hint 1

For this one you need to identify what the flex parent (container) is and set display: flex on it...that's really about it!

Properties used:

  • display: flex;

Make the squares move left across the screen horizontally like in this image.

Activity 2

Hint 2

Remember that there are 2 ways to shift elements around slightly on the page. Margins and position:relative. Either would work for this. If you choose margin remember that you can use a negative margin. (ie margin-top: -20px;)

Properties used:

  • margin-top, margin-left
  • ...or...
  • position:relative; left:, top:

Overlap and stagger the squares like in this image.

Activity 3

Hint 3

This one is going to be best solved with Flexbox again (though float: or display:inline-block could be made to work as well). Remember to make the boxes the right width first...then start moving them around.

Properties used:

  • display:flex;
  • flex-flow:
  • justify-content:
Create the 2 column layout like in this image.

Activity 4

Hint 4

For this one you will have to use the flex property on your flex children (green, yellow, and blue) for it to work right.

Properties used:

  • display:flex;
  • flex-flow:
  • justify-content:
  • align-content:
  • flex:
Duplicate the positioning in this image. Note! The centering is part of the problem with this one. Your solution should have the 4 boxes centered vertically and horizontally.

Activity 5

Hint 5

This one is a bit tricksy. Remember that flex-flow can be set to column wrap as well as row wrap Setting the widths first will also be helpful, you won't really be able to specify the heights directly...but flex can handle that for you if you set it up right.

Properties used:

  • display:flex;
  • flex-flow:
  • flex:
Duplicate the positioning in this image.

Activity 6

Hint 6

Flexbox is not the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.

Properties used:

  • float: left;
Wrap the text around the square like in this image.
Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.