For all the activities below, we also show the answers. However, in order for you to assess yourselves, we always recommend that you try to solve the exercises on your own, and then check the solution. Looking at the solutions without engaging in the activities will give you a false sense of confidence that you understand the material.
If you have seen these examples in the reading, challenge yourself by trying to solve them without looking at your or our notes.
Float
means
Other block elements flow around me
Other inline elements flow around me
I flow around other block elements
I flow around other inline elements
Clear
means
stop floating
Move other stuff below me
Move me below non-floating elements
Move me below floating elements
You are given this simple page. Resize the browser window. Notice what happens to the text and the images. Then, using the Inspector window do the following:
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.img
elements to float them on the right side. figure
element of
this page to make it look like
this one.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.
position: absolute
and position: fixed
?header
.
Try disabling/enabling all properties one by one to see what happens to the page.
Also, play with changing the different values to see their effect.div
was styled. Then check your guesses.