Various Topics

This document is under development. It is incomplete.

This is wrong:

    border: 2px black thick;

Do this:

    border: 2px black solid;

Image Rotation

If a number of your images are rotated the wrong way. I think this is because you were holding the camera at the wrong angle when you took the picture. To fix it: Add class called rotate to the your image:

    <figure class="rotate">
        <img id="theme-washington" 
            alt="Picture from Washington">

In your CSS define the class using the transform property:

    figure.rotate {
        transform: rotate(0.25turn);

Whether it is better to rotate the figure that wraps an image, or the image itself, is not clear to me. You might want to try both techniques and see which is best.

Blue arrow pointing up by default

Transform on MDN.

First select a radio button, then click the rotate button. Depending on which radio button is selected, a different style will be applied to the arrow. In other words, this code uses the technique outlined above, it is just that I defined multiple classes, like this:

    .rotate-top {
        transform: rotate(0.0turn);

    .rotate-right {
        transform: rotate(0.25turn);
    .rotate-down {
        transform: rotate(0.5turn);

    .rotate-left {
        transform: rotate(0.75turn);

I use JavaScript to apply the various classes to the image.

Float Image and Caption

Yes, I remember hitting this in class and leaving the matter unresolved. Here is what I would do now:

Give the figure a class, let's call it float-right. In the css, give the rule for figure.float-right a declaration of float: right;. Since the figcaption and the img are in the figure, they should also be automatically floated to the right. This means you should be able to remove the float: right; declaration from the img.

Summary: float the figure rather than the img. The img and the figcaption are children of the figure so they come along for the ride.

Directory names: Images vs images

Some students have one or two directories for your images files with similar names distinguished by case:

The errors that you get with a mixup between images and Images can probably see that best on Cloud9 rather than on Windows. That is because Cloud9 is based on Linux and is case sensitive, while Windows is not.

On Cloud9, copy the contents of Images to images. Then, on Cloud9, do this:

    git rm -r Images

Don't try that command on Windows, though it might work. Do it on cloud9.

Check all your links to images and make sure they point at the images directory, not at Images.

        <img src="../images/sammy.jpeg" alt="My dog Sammy">