Positioning exercise (due June 14)
This is old content
Andrew is not currently teaching IAT-339. This material is left online for reference only.
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.
- Using a combination of
absolutepositioning the pink overlay on top of the image.
- Set the pink overlay to fill up the entire container by setting the
leftproperties on the overlay.
absolutepositioning, place the title in the top right corner of the image.
- Using the
z-indexproperty, place the title overtop of the pink overlay.
Once done positioning the content
- Add comments through-out the code to indicate what resources you drew upon to complete the exercise.
- Validate your CSS to find any errors or potential problems in your additional styling.
- 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.
- Submit the URL to the Canvas assignment.
Your submission is due before lecture on June 14.
This code exercise is worth 1% (1 point) of your final grade.
- 0.75 points for completing the exercise.
- 0.25 points for validated code.
- Guide to CSS Viewport Units: vw, vh, vmin, vmax (Hongkiat): An overview of how viewport units work.
- Learn CSS Positioning in Ten Steps: A good overview of different positioning options in CSS and how to make use of them.
- Uniquely Positioning Elements (Shay Howe): A detailed breakdown of different positioning properties and their application.
- z-index (CSS Tricks): An explanation of how z-index (the CSS layer property) works.
Exercise rules reminder
Please remember that the exercise rules still apply:
- 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;
- 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.
- 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.