Back to CSS Tips
Preview: what the working site looks like.

Lilies a picture of lillies

sunset an Alaskan sunset

beach a deserted beach in Costa Rica

fishing boat a fishing boat in Cordova, Alaska

Valid HTML 5 Valid CSS!

The markup
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Untitled Document</title>
</head>
<body>  
    <div class="wrapper">
        <p><span><a href="http://www.nopeople.com/design/"><img src="03Lily%20new_jpg.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
        <p><span><a href="http://www.nopeople.com/design/"><img src="020403_sunset_jpg.jpg"   alt="sunset" width="150" height="121" /> an Alaskan sunset</a></span></p>
        <p><span><a href="http://www.nopeople.com/design/"><img src="IMG_1536_JPG.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
        <p><span><a href="http://www.nopeople.com/design/"><img src="IMG_6222%20Cape%20Elrington_jpg.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    <!--closes wrapper --></div>
</body>
</html>
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #ccc;
}
.wrapper {
	width: 80%;
    min-width: 250px;
	margin: 100px auto;
	overflow: auto;
	text-align: center;
	background: #999;
}
.wrapper p {
	display: inline;
}
.wrapper span {
	width: 150px;
	margin: 5px 10px;
	vertical-align: top;
	display: inline-block;
}
.wrapper p img {margin: 5px 0;}	
.wrapper a {text-decoration: none;}
.wrapper ul {text-align: left;}
	p span a {
		filter:alpha(opacity=70);
		-moz-opacity:.7;
		opacity:.7;
	}
	p span a:hover {	
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}