This week's lab is a good challenge. You'll demonstrate your ability to create a basic layout using images and CSS positioning. Below are an example and instructions.

analog clock face single bed, ready for sleeping fully loaded hamburger boy and girl jogging two white 8th notes on a black circle pink pony partying with kazoo

Standard Lab

  • Main image size and position
  • Five images sizes and positions (3 marks)
  • CSS & HTML Valid
  • Links for each image
  • Polish applied to standard lab
  • ADV links as list + CSS (3 marks)
  1. Grab the lab09.html template. Put lab09.html into your labs folder. (Don't forget to put a link from your main index.html page to your lab09.html page!)
  2. Grab the lab09.css template, and place it inside your css folder. Make sure the link between the HTML and CSS is correct.
  3. The images in the template are only samples. You will need to make/borrow all your own images for this lab, and try to do something fun with them! However, note a couple things about the images in the example:
    • The main img, used as a background, has had its width set to 100%, which is 100% of its parent div. There is no setting for height, as the default for height is auto (based on the width, to keep aspect ratios correct). This means that the img will appear to change size as the browser window is resized, or if the user is viewing the page on a smaller screen (give it a try).
    • The smaller img has also been sized with %. In addition, it has its position set to absolute; the top and left are specified according to the sides of the #lab09 div, which had its position set to relative. The really cool part is that top and left are in % as well; so the smaller img changes size and location as the browser window is resized.
  4. Add four more images on top of your main image, each sized with % and positioned absolutely with %.
  5. Wrap each of the images in an a element; the href is up to you. Each of your images should now be clickable, like the ones above.
  6. Once everything is working on your local copy of the website, upload the changed files to your lab site.
  7. Don't forget to validate your HTML and CSS files - I'll be checking both!

Advanced Lab

To complete the advanced lab, you'll need to make some changes to the HTML and CSS. Clearly the images above are used as a navigation system, links to other places. One of the things we've discussed is that groups of links are best contained in list elements, for easy structure and organization of content. Modify your HTML so that the links are li elements in a ul element like this:

  	<a href="link.html">
  	  <img id="bed" src="bed.png" alt="single bed" />
    		<!-- other links go here -->

The CSS may now need some changes to make the layout look the same as it did before. :)