O'Reilly logo

Sams Teach Yourself CSS in 10 Minutes by Russ Weakley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 12. Creating a Photo Gallery

In this lesson, you will learn how to create a photo gallery using a series of floated <div> elements. You will also learn how to use two backgrounds images to create a flexible container.

Creating a Thumbnail Gallery

First of all, you will need a series of thumbnail images and captions. Each thumbnail image and caption will be placed inside a <div> element. The caption will then be placed inside a <p> element as shown in Listing 12.1.

To make sure you don’t target every <div> on the page, you should apply the same classname to each one.

Example 12.1. HTML Code Containing the Markup for a Thumbnail Gallery

<div class="thumbnail"> <img src="chapter12c.jpg" alt=""> <p>A flower from my garden</p> </div> <div class="thumbnail"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required