Captions under thumbnails in the Photography template

[chasm]

I've modified the template a bit and streamlined it, but I can't figure out how to make captions appear under the photo gallery thumbnails. Any help would be appreciated.

I'm using the Photo Template

Tks!

[ishkey]

If you made mods to a template and do not post the code, then we really can not help you. Xray vision has ben disabled on this forum.

[chasm]

Duly noted re: posting code

The thumbnails are coded as an unordered list - I tried adding a second UL beneath the thumbnail UL but I couldn't wrangle the spacing so that everything lined up properly.

here's the related bits of the css:

body {
padding: 80px 0px 0px;
background: url('images/background_top.gif') #c4b8a1 repeat-x;
color: #695d47;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #695d47;
background-color: inherit;
text-decoration: underline;
}

ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 0px 0px 15px;
text-align: justify;
line-height: 15px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}

/* My Portfolio */

#portfolio .content_header h1 {
height: 28px;
background: url('images/portfolio_header.jpg') no-repeat;
}
#portfolio {
padding-bottom: 12px;
background: url('images/gallery_title.gif') no-repeat 29px 80px;
}
#gallery {
padding: 40px 0px 25px 59px;
}
#gallery ul {
width: 700px;
}
#gallery li {
margin-right: 30px;
margin-bottom: 25px;
padding: 4px 4px 2px;
background-color: #c4b8a1;
color: inherit;
float: left;
}

=====

index.html (fiddly bits removed)
<div id="portfolio">

<div class="content_header">
<h1><span>My Portfolio</span></h1>
</div>

<!-- Start of Gallery -->

<div id="gallery">

<ul>
<li><ahref="http://www.freewebsitetemplates.com/"><imgsrc="images/gallery_thumbnail_1.gif"width="84"height="76"alt="Thumbnail 1 Caption" /></a></li>
<li><ahref="http://www.freewebsitetemplates.com/"><imgsrc="images/gallery_thumbnail_2.gif"width="93"height="76"alt="Thumbnail 2 Caption" /></a></li>
<li><ahref="http://www.freewebsitetemplates.com/"><imgsrc="images/gallery_thumbnail_3.gif"width="59"height="77"alt="Thumbnail 3 Caption" /></a></li>
<li><ahref="http://www.freewebsitetemplates.com/"><imgsrc="images/gallery_thumbnail_4.gif"width="137"height="77"alt="Thumbnail 4 Caption" /></a></li>
<li><ahref="http://www.freewebsitetemplates.com/"><imgsrc="images/gallery_thumbnail_5.gif"width="119"height="78"alt="Thumbnail 5 Caption" /></a></li>
</ul>

</div>

<!-- End of Gallery -->

[ishkey]

http://www.freewebsitetemplates.com/preview/template28/ this template?

[chasm]

Yep. That template.

[ishkey]

quick fix - put back css file to orig.
try this code in html file - though it might give coding errors if someone is picky about proper code, but sill it works.

<!-- Start of Gallery -->
 
<div id="gallery">
<dl>
<ul> 
<li><a href="#"><img src="images/gallery_thumbnail_1.gif" width="84" height="76" alt="Thumbnail 1 Caption" /></a></li><dd>Hot Lips</dd>
<li><a href="#"><img src="images/gallery_thumbnail_2.gif" width="93" height="76" alt="Thumbnail 2 Caption" /></a></li><dd>Wasp Love</dd>
<li><a href="#"><img src="images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" /></a></li><dd>Mutt</dd>
<li><a href="#"><img src="images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" /></a></li><dd>Flower Power</dd>
<li><a href="#"><img src="images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" /></a></li><dd>Check It Out</dd>
</ul>
</dl>
</div>
 
<!-- End of Gallery -->

[chasm]

That works! Now to figure out *why* it works ;-)

To make changes to the appearance/size of the thumbnail labels I'm assuming you could insert a
dd {} in the css file and code from there, like:

dd {
text-decoration: underline;
text-align: center;
}

I'll try that when I'm home a little later.

Thanks again for your help

[ishkey]

Either edit the css file or add to the html file

<!-- Start of Gallery -->
 
<div id="gallery">
<div style="text-align: center"><dl>
<ul> 
<li><a href="#"><img src="images/gallery_thumbnail_1.gif" width="84" height="76" alt="Thumbnail 1 Caption" /></a></li><dd>Hot Lips</dd>
<li><a href="#"><img src="images/gallery_thumbnail_2.gif" width="93" height="76" alt="Thumbnail 2 Caption" /></a></li><dd>Wasp Love</dd>
<li><a href="#"><img src="images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" /></a></li><dd>Mutt</dd>
<li><a href="#"><img src="images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" /></a></li><dd>Flower Power</dd>
<li><a href="#"><img src="images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" /></a></li><dd>Check It Out</dd>
</ul>
</dl></div>
</div>
 
<!-- End of Gallery -->

[ishkey]

Did it work? it looks like this! where is your web link so we can see?

[chasm]

I'll post up the template in just a bit.

But one last problem

The template mod works fine in IE, but falls apart in Firefox



Do I not worry about it and post a big disclaimer on my page that warns users the page works in IE only? :-)