CS 120, Fall 2014, Lab 11:
CSS Positioning and Layout

In today's lab, you'll explore a variety of things that can be done with CSS, including CSS float and positioning as well as a few new CSS properties.

Because of the upcoming test on November 19, this lab is not due next Friday; instead, it is due the following Monday. You should make sure that it is finished and in your cs120 folder before noon on Monday, November 24. However, you do need to know the material from this lab for the exam so you should try to get most of the work done before the test. (And you should not plan to work on it during next week's lab!)

(Note: As an example, there is a menu bar at the top of this page, created using the CSS stylesheet dropdown.css that was handed out as an example in class. A copy of the file is in /classes/cs120, and you are welcome to use it on your web portfolio. However, it is not any part of the work for this lab.)

Multicolumn with Float

To begin the lab, copy the folder named lab11 from /classes/cs120 into your cs120 folder. All the work that you do for this lab should be done by editing files in that folder.

One of the files in your lab11 folder is called multicolumn.html. The file is plain HTML, with no CSS styling. It is broken up into five sections by <div>, and each div has an id. The main text on the page consists of paragraphs of "Lorem ipsum" text. (This is a kind of latin nonsense that is used by printers to fill space. You can read about it on Wikipedia.) In this section of the lab, you will work on adding style to this page. In particular, you make the page use a multicolumn layout as shown in the picture.

Add a <style> section to the <head> of multicolumn.html. You should make absolutely no changes to the page outside of the style section, except that you can change the link at the bottom of the page if you want. Do everything with CSS! You should complete the following exercises. Some parts of the exercise introduce new aspects of CSS. You can apply additional style if you want, but you should do at least the following:

  1. All headlines (h1, h2, and h3 elements) on the page should be centered.
  2. Change the color of the headline in the div with id="two".
  3. Use float: left as we discussed in class, to convert the page to a multicolumn format. The columns are the div's that have id #one, #two, and #three. The middle column should be wider than the other two columns, and there should be some space between the columns. This is a "liquid layout," which means you should express the widths in terms of percentages. Be careful that the sizes of the columns don't add up to more than 100%. Remember that all three columns should be floated to the left!
  4. Put visible borders around the div's with id #head and #foot. After adding the CSS rule to do this, you will see that the border for #foot actually includes the three floating columns! (Be sure to check in a browser that this is true!) This is because of the float, but it is undesirable. To fix the problem, add the rule clear: both; to the CSS style for #foot. This rule forces an element to drop down to a new line following all floating elements. (Check out the page after making the change to see that it worked.)
  5. The selector p:first-letter applies only to the very first letter in a paragraph. Use this fact to apply a style to the first letters of paragraphs. Make the letters bigger than the rest of the text.
  6. The selector p:first-line applies only to the very first line in a paragraph. Use this fact to apply a style to the first lines of paragraphs. Use the style rule  text-transform: uppercase  to make all of the characters in the first line of each paragraph upper case.

A Translucent Overlay

In this section of the lab, you will work with the file overlay.html. The page has a lot of Lorem ipsum text, with a button at the top. Clicking the button makes an initially-hidden div visible. Clicking anywhere on the div makes it invisible again.

Your assignment is to turn the div into a translucent overlay that covers most of the page. Translucent means you can see the page through the overlay. A picture of the effect is shown here. Do not make any changes to the page, except in the style section. Here are the steps. Again, there is some new CSS here.

  1. Give the div a background color.
  2. Apply style to the h2 inside the div to make it very large and colored.
  3. To make the div occupy the same part of the page that also contains other elements, you have to set the CSS position property of the div to have the value absolute or fixed. The difference is that with absolute, the div will scroll with the rest of the page, while with fixed, the div will occupy a fixed position in the window. Use position:fixed for this exercise.
  4. Give values to the left, top, right, and bottom CSS properties to make the overlay cover most of the page. You can use either percentages, which will be relative to the width and height of the window, or you can use lengths. Check the effect!
  5. Finally, you need to make the div partly transparent. This is easy to do, using the CSS opacity property. The value of this property is a number between 0 and 1 that says how opaque an element should be. Bigger values make the element less transparent and more opaque. Set a value for opacity somewhere between 0 and 1 that gives a good effect.

(Here's something you can do for a little extra credit: Use a JavaScript animation to make the word "BOO" move around while the overlay is shown. The animation should start when the overlay is shown and should stop when it is hidden. You will need to give an id to the <h2> that contains the "BOO". Consider using position: relative for the h2.)

Backgrounds? Check!

This section of the lab is about backgrounds, especially background images. It introduces some new rules that can be applied to control the positioning of background images, along with a few other bits of new CSS.

For this assignment, you will work on the file backgrounds.html. The web page has four div's, and there is a style section that already applies some style to the divs. They have a fixed width, a border, padding and margin, and they are centered on the page. To make things even more interesting, I added a box-shadow, which makes it look like the divs are casting shadows on the page. The max-height property is used to set the maximum allowed height for an element. This is used in combination with the rule overflow: auto which adds a scroll bar to the div when the height of the content is larger than the specified minimum height.

You will add a background to the page as a whole, and you will add a different background to each div on the page. You should not make any changes outside the <style> section of the page. There are some images in the lab11 folder that will be used as backgrounds.

First, use the image marble.gif as a background for the entire page. This background image is "tileable." This means that its left edge matches up with its right edge and its top edge matches up with its bottom edge, so that when copies of the image are lined up to fill the window, the result is a "seamless" image that has no discontinuity between the copies. This "seamless" property is desirable for small background images that have to be repeated to fill the browser window. To use marble.gif as the background for the whole page, add a style rule for the body element and apply the property

background-image: url("marble.gif");

to the body. To make things more interesting, also apply the following property to the body style:

background-attachment: fixed;

This means that the background image will not scroll when you scroll the contents of the page. The contents seem to move over a fixed background, which can give an interesting effect. Take a look! (The other possible value for background-attachment is scroll, which is the default value.)

(By the way, it's suggested that one should always specify a background-color when specifying a background-image, just in case the background image can't be loaded for some reason. The background color will also be used while the background image is being loaded, which can take a while if the image file is big.)

Second, add the image fadeout.jpg as a background for the div with id="head". This image fades out to white towards the left end of the image, so it looks OK behind fairly short headlines. It's important that the text in front of any background image should be readable! This image will look best if it stretched to fill the entire div. To do that, add the following rule:

background-size: 100%;

This will stretch the image so it just fits the width of the div. (You can add a second size to the value to specify the height when you need to do that.)

Third, you will apply a translucent color as the background for the div with id="one". This requires the use of a CSS "RGBA" color. RGBA colors can be used to specify colors in CSS, in the same way that you would use blue or #DD80FF. Examples of RGBA color are: rgba(255,0,0,0.7), rgba(150,150,200,0.3), and rgba(255,255,0,0.5). The value includes four numbers in parentheses, separated by commas. The first three numbers give the red, green, and blue components of the color, as integers between 0 and 255. So, 255,0,0 is pure red, 150,150,200 is light blue, and 255,255,0 is yellow. The fourth number is a decimal between 0.0 and 1.0 that specifies the degree of transparency, where 0.0 means fully transparent, and 1.0 means fully opaque. For example, 0.5 would be half transparent. Try some values, and make sure that you have a transparent color that lets the page background show through to some extent.

Fourth, work on the background for the div that has id="two". Start by using the image boo.png as a background. The image is a picture of the word "Boo!". Outside that word, the image is transparent, so the page background will show through.

However,... I just want one "Boo!" behind the text. For that, you have to set the value of the background-repeat property to no-repeat. (Other values include repeat-x or repeat-y, which repeat the image in the horizontal or vertical direction only.)

Furthermore, I would like the image to be centered in the div. For that, you have to set the background-position property to center.

The background will look better if you also apply a background color to the div. In the end, the background color overlays the page background, and the background image overlays the background color. If the background image is partly transparent, then the background color shows where the image is transparent. Try to find a background color that looks OK.

Fifth and finally, use the image wavy.png as a background image for the div with id="three." This is an image that fades from opaque to transparent as you go from left to right in the image. Set the background-repeat to repeat-y so that you get just one horizontal copy of the background, but it repeats in the y direction.

You should also apply some appropriate background color to the div, to underlay the background image. As a final touch, you should add a margin of about 100px to the left of the <h1> and <p> elements in the div. You need to do this because text over the opaque part of the background image will not be very readable. Here is what my version of this exercise looked like:

If you want, you can change the text colors on the page to make the text look better on the various backgrounds, as I did for the above picture.