Flashback to April 2016!
CS 491 Lecture 19 - Box Modeling

teaching machines

CS 318 Lab 11 – Two-column Layout

Dear students,

Today we visit the canonical two-column layout. We’ll use the float property to allow other content to flow around it. We’ll do a quick example together of adding drop caps to a page.

Suppose we have this paragraph:

A writer—and, I believe, generally all persons—must think that whatever happens to him or her is a resource. All things have been given to us for a purpose, and an artist must feel this more intensely. All that happens to us, including our humiliations, our misfortunes, our embarrassments, all is given to us as raw material, as clay, so that we may shape our art.

Let’s set apart the initial letter by putting it in its own span:

<span class="dropcap">A</span> writer&mdash;and, I believe, generally all persons&mdash;must think that whatever happens to him or her is a resource. All things have been given to us for a purpose, and an artist must feel this more intensely. All that happens to us, including our humiliations, our misfortunes, our embarrassments, all is given to us as raw material, as clay, so that we may shape our art.

Then we can make it really big and colorize it in CSS:

.dropcap {
  font-size: 52pt;
  color: hsl(350, 50%, 50%);
}

But there’s no flowing of content around our really big letter. Let’s add some floating and tweak the line height to make it look aesthetically balanced:

.dropcap {
  font-size: 52pt;
  color: hsl(350, 50%, 50%);
  float: left;
  line-height: 0.75;
  padding-right: 5px;
}

And there we have it!

Here’s your TODO list for next time:

See you then!

Sincerely,

Lab

First create a lab11 directory. Add a partners.html and include your first names and last initials.

Pizza Place

Your task in this lab is to make a website for a pizza place. It consists of three pages: a home page, a menu, and an embedded map. All will share the same general layout, with only the content in the main element changing.

Home

In home.html and pizza.css, create a page that looks like this:

Follow this checklist:

Menu

In menu.html, add a menu whose text flows around images of the various pizzas that can be ordered at your restaurant. Match this general layout:

Directions

In directions.html, add a map that your viewers can use to locate your business. Matching this general layout:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Past Posts

Categories