DIGI 220 Labs
Lab 09 - Basic Layout with Positioning
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.
- 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)
- 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!)
- Grab the lab09.css template, and place it inside your css folder. Make sure the link between the HTML and CSS is correct.
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
widthset to 100%, which is 100% of its parent
div. There is no setting for
height, as the default for
auto(based on the
width, to keep aspect ratios correct). This means that the
imgwill 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
imghas also been sized with %. In addition, it has its
leftare specified according to the sides of the
#lab09 div, which had its
relative. The really cool part is that
leftare in % as well; so the smaller
imgchanges size and location as the browser window is resized.
- The main
- Add four more images on top of your main image, each sized with % and positioned absolutely with %.
Wrap each of the images in an
hrefis up to you. Each of your images should now be clickable, like the ones above.
- Once everything is working on your local copy of the website, upload the changed files to your lab site.
- Don't forget to validate your HTML and CSS files - I'll be checking both!
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:
<ul> <li> <a href="link.html"> <img id="bed" src="bed.png" alt="single bed" /> </a> </li> <!-- other links go here --> </ul>
The CSS may now need some changes to make the layout look the same as it did before. :)