teaching machines

CS 318: Lab 9 – Fixed Positioning

February 28, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Today we begin our exploration of the several ways to break away from the normal left-to-right, top-to-bottom flow of a web page. We started with fixed positioning, because it introduces the ideas of anchoring outside the hierarchy. In fact, fixed position effectively removes an element entirely from its natural position in the hierachy and places it relatively to browser’s viewport.

Suppose you want a top navbar across your page. You might add this:

<header>WKRP - when the news hits the fan, we scoop it.</header>

With our randomly-generated main copy:

  <p>Delightful unreserved impossible few estimating men favourable see entreaties. She propriety immediate was improving. He or entrance humoured likewise moderate. Much nor game son say feel. Fat make met can must form into gate. Me we offending prevailed discovery. </p>

  <p>Chapter too parties its letters nor. Cheerful but whatever ladyship disposed yet judgment. Lasted answer oppose to ye months no esteem. Branched is on an ecstatic directly it. Put off continue you denoting returned juvenile. Looked person sister result mr to. Replied demands charmed do viewing ye colonel to so. Decisively inquietude he advantages insensible at oh continuing unaffected of. </p>

  <p>Exquisite cordially mr happiness of neglected distrusts. Boisterous impossible unaffected he me everything. Is fine loud deal an rent open give. Find upon and sent spot song son eyes. Do endeavor he differed carriage is learning my graceful. Feel plan know is he like on pure. See burst found sir met think hopes are marry among. Delightful remarkably new assistance saw literature mrs favourable. </p>

  <p>One advanced diverted domestic sex repeated bringing you old. Possible procured her trifling laughter thoughts property she met way. Companions shy had solicitude favourable own. Which could saw guest man now heard but. Lasted my coming uneasy marked so should. Gravity letters it amongst herself dearest an windows by. Wooded ladies she basket season age her uneasy saw. Discourse unwilling am no described dejection incommode no listening of. Before nature his parish boy. </p>

  <p>Talking chamber as shewing an it minutes. Trees fully of blind do. Exquisite favourite at do extensive listening. Improve up musical welcome he. Gay attended vicinity prepared now diverted. Esteems it ye sending reached as. Longer lively her design settle tastes advice mrs off who. </p>

  <p>Dissuade ecstatic and properly saw entirely sir why laughter endeavor. In on my jointure horrible margaret suitable he followed speedily. Indeed vanity excuse or mr lovers of on. By offer scale an stuff. Blush be sorry no sight. Sang lose of hour then he left find. </p>

  <p>Boy desirous families prepared gay reserved add ecstatic say. Replied joy age visitor nothing cottage. Mrs door paid led loud sure easy read. Hastily at perhaps as neither or ye fertile tedious visitor. Use fine bed none call busy dull when. Quiet ought match my right by table means. Principles up do in me favourable affronting. Twenty mother denied effect we to do on. </p>

  <p>Literature admiration frequently indulgence announcing are who you her. Was least quick after six. So it yourself repeated together cheerful. Neither it cordial so painful picture studied if. Sex him position doubtful resolved boy expenses. Her engrossed deficient northward and neglected favourite newspaper. But use peculiar produced concerns ten. </p>

  <p>Effect if in up no depend seemed. Ecstatic elegance gay but disposed. We me rent been part what. An concluded sportsman offending so provision mr education. Bed uncommonly his discovered for estimating far. Equally he minutes my hastily. Up hung mr we give rest half. Painful so he an comfort is manners. </p>

  <p>Remain valley who mrs uneasy remove wooded him you. Her questions favourite him concealed. We to wife face took he. The taste begin early old why since dried can first. Prepared as or humoured formerly. Evil mrs true get post. Express village evening prudent my as ye hundred forming. Thoughts she why not directly reserved packages you. Winter an silent favour of am tended mutual. </p>

Let’s style this to add some contrast:

* {
  box-sizing: border-box;

body {
  font-size: 18pt;

header {
  background-color: black;
  font-size: 24pt;
  color: white;
  text-align: center;

By default, these elements will flow, but when the font gets bigger and the user starts scrolling, we lose the top bar. Web developers are afraid that if viewers lose the ability to navigate a page quickly, they will abandon the site. Fixed positioning helps us keep an element—like navlinks—on screen at all times. Let’s add this CSS, which anchors the bar to the top and widens it to fill the window:

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

The downfall is that the main content appears under the top bar. How do we fix that? We’ll add a little margin.

Here’s your TODO list for next time:

See you then!



Our goals for this lab include:

The exercises from last lab took a bit longer, so this lab only introduces one new exercise. Please complete the last lab’s exercises before diving into the quokka slideshow described below.


Your task is to create quokka slideshow that looks and behaves something like this:

The yellow rings serve only to highlight click events. They were added by the screen capture software and should not appear on your page.

Follow these steps to get your page up and smiling:

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab09 in your browser.

Validate your pages with the W3C CSS Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.