The CSS Anthology366
Figure 9.40. Building an image gallery of thumbnails using CSS
Solution
This solution uses a simple list for the album images, and positions them using
CSS:
gallery.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>CSS photo album</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link href="gallery.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="albumlist">
367CSS Positioning and Layout
<li><img src="thumb1.jpg" alt="Candle" width="240"
height="160" />A light in the darkness</li>
<li><img src="thumb2.jpg" alt="Pete Ryder" width="240"
height="160" />Pete Ryder</li>
<li><img src="thumb3.jpg" alt="La Grande Bouffe" width="240"
height="160" />La Grande Bouffe</li>
<li><img src="thumb4.jpg" alt="sculpture" width="240"
height="160" />Sculpture</li>
<li><img src="thumb5.jpg" alt="Duck stretching wings" width="240"
height="160" />Splashing about</li>
<li><img src="thumb6.jpg" alt="Duck" width="240" height="160"
/>Duck</li>
<li><img src="thumb7.jpg" alt="Red leaves" width="240"
height="160" />Red</li>
<li><img src="thumb8.jpg" alt="Autumn leaves" width="240"
height="160" />Autumn</li>
</ul>
</body>
</html>
gallery.css
body {
background-color: #FFFFFF;
color: #000000;
margin: 0;
padding: 0;
}
#albumlist {
list-style-type: none;
}
#albumlist li {
float: left;
width: 240px;
margin-right: 6px;
margin-bottom: 10px;
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #333333;
}
#albumlist img {
display: block;
border: 1px solid #333300;
}
Get The CSS Anthology, Second Edition 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.
