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"> ...
Get Sams Teach Yourself CSS in 10 Minutes now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
