Unit 2 CSS Stylesheet Question

CS Discoveries
1

As my students have added multiple images to each of their webpages towards the end of this unit, they have begun to add a float feature in the css stylesheet. As they float their pictures away from the left side, their citations below the pictures (in

tags) move all over the page and the formatting looks awful. Is there a way to float or move paragraphs of citation info with the picture?

2

Yes, that’s possible, but the trick is to wrap the image and the caption inside another container called “figure”

This is beyond the scope of what is taught in unit 2, however, since you asked, I will share an example of how I do this in a slightly more advanced class.

Below is the html code for one single image.

<figure class = "projects">
    <img src="gallery3.jpg" alt="picture of Italy">
    <figcaption><span>Italian Countryside</span> You can't beat the beauty of the Italian Countryside.</figcaption>
</figure>

Then, in the stylesheet, you float the “figure” to the left (instead of the image) and everything inside the figure container goes with it.

Here’s a link to a site with 5 images coded like the one above.

Image Gallery Example

This is the stylesheet code that styles the html in my example:

/* -- This is where the figure containers and the images are styled --*/

figure.projects {
  float:left;
  padding-top: 2px;
  border: solid 1px black;
  text-align:center;
  height: 270px;
  width: 260px;
  margin: 1rem;
  background: white;
}

figure.projects figcaption {
  font-size: .75rem;
}

figure.projects figcaption span {
  display: block;
  font-weight:bold;
  font-size: .9rem;
  color: red;
}

Hope this helps!

Mike