Gallary layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gallery</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 62.5%;
margin: 0px;
padding: 0px;
}
#content {
margin-left: 15px;
margin-top: 15px;
border: 1px dashed #999;
border-right: none;
border-bottom: none;
}
p.intro {
font-size: 1.3em;
line-height: normal;
margin-bottom: 15px;
}
h1 {
font: normal 2.4em Verdana, Arial, Helvetica, sans-serif;
margin: 0;
border-bottom: 1px dashed #999;
padding: 5px 0 5px 8px;
color: #14556b;
}
p {
font: 1.6em/160% Georgia, "Times New Roman", Times, serif;
margin: 10px 8px;
}
.copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-transform: uppercase;
color: #666666;
margin-left: 0px;
padding-left: 8px;
border-top: 1px dashed #999;
clear: both;
}
.figure {
width: auto;
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
</style>
</head>
<body>
<div id="content">
<h1>Gallery </h1>
<p class="intro">this is a test. this is a test. </p>
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="http://www.java2s.com/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 1: </p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.java2s.com/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 2: .</p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.java2s.com/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 3: </p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.java2s.com/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 4: </p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.java2s.com/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 5: this is a test. </p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.java2s.com/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 6: . </p>
</div>
</div>
<p class="copyright">Copyright 2006</p>
</div>
</body>
</html>
Related examples in the same category