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:
- make the h1, h2, and h3 elements maroon.
- Put a
maroon
box around the nav
and make
the background color be tan
.
- 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.
- Make the image in the introduction be 150px wide, with a 15px
right margin.
- The text is too close to the maroon background. Give it 10px of
padding.
- 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.
- Make optional stuff maroon.
- Make the header have a 4px double maroon border, but only -top and
-bottom, not -left and -right. Make the background color be tan.
- 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.
- What would be better markup for the
author
photos?
- 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
Other block elements flow around me
Other inline elements flow around me
I flow around other block elements
I flow around other inline elements
Quiz Question Nr. 2
Clear
means
stop floating
Move other stuff below me
Move me below non-floating elements
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:
- 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.
- Apply styling to the
img
elements to float them on the right side.
- 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.
- Apply styling to the
figure
element of
ex3_1 to make it look like
ex4.
- 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
- Starting with this page,
add styling to the appropriate elements
in order to create the two-column layout shown in
this page.
- 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
- 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).
- What can you do to fix this problem, so that the page looks like
this one.
- Try to predict if setting the margin-top property for the footer element would
push that element down. Is your prediction correct?
- 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
- Can you explain what is the difference between the styles:
position: absolute
and position: fixed
?
- 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.
- 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
.
Clicker questions:
1. B
2. D
Exercise 2:
- The images and text continue to flow
img { float: right; }
- the body has a fixed width, a background color, and is centered.
figure { float: right; border: 1px solid black; padding: 3px; }
- There's not much difference. In ex4 the IMG is inside a FIGURE
that is floated to the right; the FIGURE gives a bit of padding. In
ex2, the image itself is floated to the right. In both cases,
something floats to the right.
Exercise 3:
- The aside floats to the left, and gets a border, padding and a
width. The section gets a 210px left margin.
- We add a right margin and make the #rightAside float into it.
Exercise 4:
- the footer has moved up too high.
- Move the footer down using
clear:both
- Margin doesn't help a lot; it can overlap with floated elements,
so you have to adjust it a lot.
- The image has floated outside its container. We can solve this
by inserting an element and using
clear
or by
using overflow:hidden
Exercise 5:
- Absolute is relative to the document, while fixed is relative to the
screen.
- It uses position:absolute to place the picture. Notice how the
text overlaps; that's impossible with floats.
- Switch to position:fixed