Lab: CSS and Page Layouts
- Practice creating page layouts with CSS.
Download lab materials
Log into the cs.wellesley.edu server to download a copy of the
Plan your approach
lab_css/index.html in your browser, you'll see this unstyled HTML page:
Our goal in this lab is to take that HTML page, add style, and end up with something like this:
To accomplish this task, we'll start by styling the bigger pieces and work our way in. Don't worry yet about things like colors, background images, fonts, etc. You can get to them at the end.
lab_css/index.html in your code editor. Note the outer html elements that act as containers
for the smaller parts of the page.
Using your notebook, and referring to the finished screenshot above, sketch out where you think the “containers” of this layout are.
Lay out the big pieces
Identify the outer container,
Set a reasonable width (for example 800px) and center it on the page, exactly as we did last week.
Give it a
background-color:red;. Maybe ugly, but it's only temporary, and it will
help us see the shape of the container.
Identify the two columns that reside within the outer container.
Give the left column (navigation bar) a width of
200px and the right column
(the rest pf the content) a width of
Give the left column a
background-color:yellow; and the right column a
so you can easily see them on the page.
Now add this rule to your left column:
Save, reload and you should see the left column set next to the right column:
It is getting to look like two columns, but it still needs some fixing. Can you think of a way to push the second column away from the left end of the page? (Hint: Think margin!) The end result, after the fix, should look like this:
Layout the 2x2 grid of house info
Now lets focus on arranging the content in the right column.
In the final example we see a 2x2 grid of Hogwart's house information. Each grid element is contained in what element in the html file?
If the total width of this column is
600px how wide should each grid element be?
Set this width. Also, give the grid elements a
The grid elements are stacked up— Similar to what we did earlier with the nav, add to them this property
to make them sit next to one another, like this:
You should now have a 2x2 grid.
margin:5px to your grid elements, so they have a little “breathing room”
Woah! That broke your grid:
What happened, and how can you fix it? The end result, so far, should look like this:
At this point, your overall layout is pretty complete and you can start “drilling in” to the specifics. Use some of what you learned in the previous lab. Here are some ideas:
- Remove the bullet points from the links in navigation column on the left
- Make the links bold, black, and remove the underline.
5pxof padding to your house grids. This will break your 2x2 floating grid layout, just like when you added the margin, so you'll have to fix that again.
- Float the crest images, so that the h2s will sit next to them.
- Center the text in the footer.
- Add the tiling background image (
images/old-map-texture.png), and remove the bg colors.
- Add borders to the house grids, and round their corners.
Style last week's pages
- If time permits, use what you learned today to alter the appearance of the pages we worked on in last week's lab i.e. wellesley.html and ishaeu-wong.html. Try to arrange the contants of those pages to appear in two columns, with the left one being the nav bar, and to the right of it the rest of the contents.
As a starting point, you may want to download the folder download/lab04_solutions.
Notice that you will add any css code in the
style.css file we developed last week, so that
you only have one such document.
Also, you may need to edit -even slightly- the .html docs.