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.navioo.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.navioo.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.navioo.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.navioo.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.navioo.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.navioo.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>
Gallary layout : div table : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » div table »

HTML CSS TUTORIALS
