teaching machines

CS 318: Lab 8 – Horizontal Alignment and Gradients

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

Dear students,

Today, we will continue to explore the box model—because we need to. The vast majority of our difficulties with designing for the web will involve alignment and positioning.

Suppose you want to horizontally center an element. What must be true?

  1. It must be a block element. Centering doesn’t make sense for phrase elements.
  2. The space to the left must be equal to the space on the right.

We can achieve statement 1 by using a div, p, or some other block element. In other cases, we can set the display property to block. We can achieve statement 2 by setting the left and right margins. Here we set them horizontal margin to a fixed number of pixels:

div {
  margin-left: 10px;
  margin-right: 10px;
}

I wish there was a way in CSS to collapse these two properties together. There is the short form, but that requires us to also specify the vertical margin, and I don’t always want to re-specify that. I wish they had a symbolic keep or current value—or a margin-horizontal property.

If we resize the page, we see that we’re always fixed amount of pixels away from the browser’s edge. We could also use percentages:

div {
  margin-left: 10%;
  margin-right: 10%;
}

In both these cases, the child element is sized according to its parent. What if the child knows its size on its own?

div {
  width: 200px;
  margin-left: 10%;
  margin-right: 10%;
}

The div is no longer centered. At this point I we need to adjust our notion of what a margin is. A margin is the minimum space that must appear around an element, separating it from its peers and parent. If an element’s width is unspecified, then margin will be an exact measurement as the width is set to fill up the available space. But if width is specified, there may be more space around the element than just the margin.

So, centering children that have sized themselves is tricky. What we need is to figure out how much space is available, subtract away the child’s width, and split what’s left between the margins. We can do that with the auto keyword. If we assign it to the left margin, we get right alignment:

div {
  width: 200px;
  margin-left: auto;
}

If we assign auto to the right margin, we get right alignment. If we assign it to both, we get centering:

div {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

We’ll also add some colorful flavor through gradients. Gradients have some nice properties:

Let’s see an example:

#flag {
  background-image: linear-gradient(to bottom, black, red, yellow);
}

Here’s your TODO list for next time:

See you then!

Sincerely,

Lab

We’ve got a few goals for this lab:

Our two exercises include staging a debate between two parties and designing a page to celebrate someone’s hometown.

Debate

Create a “debate” between two individuals that looks like this:

Here’s your checklist:

Hometown

Create a webpage that welcomes visitors to a city. Pick your own content and colors, but match the layout and general style of this example:

Pay particular attention to the spacing. Use a box with a fixed size to hold all the content. That means it shouldn’t shrink or grow when you resize the window.

Also, use the semantic elements that we discussed a few weeks ago: header, nav, main, and footer. Recall that these elements are used by screen readers to understand the structure of a page.

Also also, use an img element for the main graphic. In the last lab, we used the CSS background-image element to achieve certain layering effects. We don’t need those here, and img is more appropriate.

Also x3, the inset shadow on the example image is in the original. You can emulate it if you want with box-shadow.

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab08 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.