• Article Written 
  • on 20.06.2009
  •  at 06:15 AM
  •  by admin

Creating a Image Gallery with Caption

In this post we crating a simple image gallery with caption. There is a much simpler way to do this with a list and some very easy CSS. Depending on what you want to do with your photo gallery you may want to have a caption or more information available on the page.

Now first we creat a simple HTML structure.

[code lang="htmlstrict"]
 
[/code]

CSS Code
Now we Create simple and effective CSS code. Here is the code.

[code lang="css"]
* {margin:0; padding:0;}
body {
font:100%.1 normal Arial, Helvetica, sans-serif;
}
a {
text-decoration:none;
color:#333333;
font:82.5% normal Arial, Helvetica, sans-serif
}
a:hover {
color:#FF0000;
}
img {
border:0;
}
h1 {
color:#bbb;
font:195% bold Arial, Helvetica, sans-serif;
line-height:100%;
}
[/code]
[code lang="css"]
.gallery {
width:600px;
margin:0 auto; 
}
.gallery ul, .gallery ul p {
margin:0;
padding:0;
list-style-type:none;
}
.gallery ul li {
display:inline;
} 
.gallery ul li a {
display:block;
margin:5px;
float:left;
padding:5px;
width:150px;
border:1px solid #ccc;
}
.gallery ul p {
text-align:center;
padding:2px 0 2px 0;
}
[/code]

finaly we are done. We have created a image gallery with caption. css-image-gallery-with-caption

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,