ahandrewh teaches IAT-339web design & development

Positioning exercise (due Oct 27)


To practice working with positioning in CSS, this week's code task has you practicing placing and positioning elements in different ways to resolve a given layout problem.


For this exercise you will be starting with a pre-built set of HTML and CSS files. Please download the starter files.

When you open up the index.html file, you will see there is already some HTML content and CSS styling pre-built for you. Please add classes and CSS styling to the existing structure as necessary to position the content as requested below.

  1. Using a combination of relative and absolute positioning the pink overlay on top of the image.
  2. Set the pink overlay to fill up the entire container by setting the top, right, bottom, and left properties on the overlay.
  3. Using absolute positioning, place the title in the top right corner of the image.
  4. Using the z-index property, place the title overtop of the pink overlay.
A title placed overtop of a pink tinted image

The final result should look like the above image

Once done positioning the content

  1. Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
  2. Validate your CSS to find any errors or potential problems in your additional styling.
  3. Please create a new repository for your exercise on SFU GitHub. Add your files to the repository and push the changes to the remote repository.
  4. Submit the URL to the Canvas assignment.

Your submission is due before lecture on Oct 27.

Grading rubric

This code exercise is worth 1% (1 point) of your final grade.

Exercise rules reminder

Please remember that the exercise rules still apply:

  1. You can use online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
  2. Cite any knowledge that is not yours in a comment in the code. The internet is a huge repository of information and you are welcome to use it, but you must let us know when something does not originate from your own knowledge.
  3. If work has been copied without citation the exercise grade will be zero. Please make sure to include comments indicating where you had assistance or learned.