1) The images
The key to this exercise was to scale or crop the images...
a) because they were simply too big; and
b) because they were of different widths - by giving them the
same width you make it easier to get a nice column of images.
When scaling the images,
- It was unsatisfactory if you asked the browser to do it
(e.g. by setting their width in either the HTML or the CSS).
- It was important to do it instead using PaintShopPro/Gimp/etc.
- It was important to preserve their aspect ratio, otherwise you
distorted the images (e.g. people appear stretched or squashed).
2) The HTML
- It was essential to do what the lab sheet asked you to do,
especially nav in head, and main before images. (If you put the
images before the main, then you were solving a completely
different exercise - you received a heavy penalty.)
- Here's a sketch of one simple solution:
- Several of you left out the #wrapper and failed to center
the web page.
3) The CSS
- The essential elements were the following:
a) Center the wrapper
b) Carry out the "four steps" (float the thing that comes first;
give it a width; clear the footer; put a margin on the thing
that you didn't float):
- Some of you omitted step four - I made the point in the lecture
that this margin is needed to make your design more robust. So you
lost marks for omitting it. Similarly, some of you threw in extra
things (e.g you set the width of the