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
Thanks, very useful!
Hey admin, good job! Very very helpful tutorial! Ive been looking into this for a couple of hours now. Thanks for taking time and making a tutorial like this one.
hi,
the problem is, what happens if the caption text is very long and so taking multiple rows? thats what i am stuck at the moment.. i am also trying to make it fluid. after an hour of research i somehow think that is not even possible.
Hi,
I’m having the same problem as Mike. If the caption is too long, then the spot under that element is left blank.
Any solution? Please!