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!
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.
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 -->
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. Code: [I][COLOR=#ff0000][COLOR=#ff0000]<!-- Start of Gallery -->[/COLOR][/COLOR][/I] [B]<div[/B] id=[B]"gallery">[/B] [B]<dl>[/B] [B]<ul>[/B] [B]<li><[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] href=[B]"#"><[/B][B][COLOR=#800000][COLOR=#800000]img[/COLOR][/COLOR][/B] src=[B]"images/gallery_thumbnail_1.gif"[/B] width=[B]"84"[/B] height=[B]"76"[/B] alt=[B]"Thumbnail 1 Caption"[/B] [B]/></[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]></li><dd>[/B]Hot Lips[B]</dd>[/B] [B]<li><[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] href=[B]"#"><[/B][B][COLOR=#800000][COLOR=#800000]img[/COLOR][/COLOR][/B] src=[B]"images/gallery_thumbnail_2.gif"[/B] width=[B]"93"[/B] height=[B]"76"[/B] alt=[B]"Thumbnail 2 Caption"[/B] [B]/></[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]></li><dd>[/B]Wasp Love[B]</dd>[/B] [B]<li><[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] href=[B]"#"><[/B][B][COLOR=#800000][COLOR=#800000]img[/COLOR][/COLOR][/B] src=[B]"images/gallery_thumbnail_3.gif"[/B] width=[B]"59"[/B] height=[B]"77"[/B] alt=[B]"Thumbnail 3 Caption"[/B] [B]/></[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]></li><dd>[/B]Mutt[B]</dd>[/B] [B]<li><[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] href=[B]"#"><[/B][B][COLOR=#800000][COLOR=#800000]img[/COLOR][/COLOR][/B] src=[B]"images/gallery_thumbnail_4.gif"[/B] width=[B]"137"[/B] height=[B]"77"[/B] alt=[B]"Thumbnail 4 Caption"[/B] [B]/></[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]></li><dd>[/B]Flower Power[B]</dd>[/B] [B]<li><[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR][/B] href=[B]"#"><[/B][B][COLOR=#800000][COLOR=#800000]img[/COLOR][/COLOR][/B] src=[B]"images/gallery_thumbnail_5.gif"[/B] width=[B]"119"[/B] height=[B]"78"[/B] alt=[B]"Thumbnail 5 Caption"[/B] [B]/></[/B][B][COLOR=#800000][COLOR=#800000]a[/COLOR][/COLOR]></li><dd>[/B]Check It Out[B]</dd>[/B] [B]</ul>[/B] [B]</dl>[/B] [B]</div>[/B] [I][COLOR=#ff0000][COLOR=#ff0000]<!-- End of Gallery -->[/COLOR][/COLOR][/I]
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
Either edit the css file or add to the html file Code: [I][SIZE=1][COLOR=#ff0000][SIZE=1][COLOR=#ff0000]<!-- Start of Gallery -->[/COLOR][/SIZE][/COLOR][/SIZE][/I] [SIZE=1][B]<div[/B] id=[B]"gallery">[/B][/SIZE] [SIZE=1][B]<div[/B] style=[B]"[/B][/SIZE][B][SIZE=1][COLOR=#008000][SIZE=1][COLOR=#008000]text-align[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]:[/SIZE][/B][SIZE=1] center[B]"><dl>[/B][/SIZE] [SIZE=1][B]<ul>[/B] [/SIZE] [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"#"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/gallery_thumbnail_1.gif"[/B] width=[B]"84"[/B] height=[B]"76"[/B] alt=[B]"Thumbnail 1 Caption"[/B] [B]/></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li><dd>[/SIZE][/B][SIZE=1]Hot Lips[B]</dd>[/B][/SIZE] [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"#"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/gallery_thumbnail_2.gif"[/B] width=[B]"93"[/B] height=[B]"76"[/B] alt=[B]"Thumbnail 2 Caption"[/B] [B]/></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li><dd>[/SIZE][/B][SIZE=1]Wasp Love[B]</dd>[/B][/SIZE] [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"#"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/gallery_thumbnail_3.gif"[/B] width=[B]"59"[/B] height=[B]"77"[/B] alt=[B]"Thumbnail 3 Caption"[/B] [B]/></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li><dd>[/SIZE][/B][SIZE=1]Mutt[B]</dd>[/B][/SIZE] [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"#"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/gallery_thumbnail_4.gif"[/B] width=[B]"137"[/B] height=[B]"77"[/B] alt=[B]"Thumbnail 4 Caption"[/B] [B]/></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li><dd>[/SIZE][/B][SIZE=1]Flower Power[B]</dd>[/B][/SIZE] [SIZE=1][B]<li><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] href=[B]"#"><[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]img[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=1] src=[B]"images/gallery_thumbnail_5.gif"[/B] width=[B]"119"[/B] height=[B]"78"[/B] alt=[B]"Thumbnail 5 Caption"[/B] [B]/></[/B][/SIZE][B][SIZE=1][COLOR=#800000][SIZE=1][COLOR=#800000]a[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=1]></li><dd>[/SIZE][/B][SIZE=1]Check It Out[B]</dd>[/B][/SIZE] [SIZE=1][B]</ul>[/B][/SIZE] [SIZE=1][B]</dl></div>[/B][/SIZE] [SIZE=1][B]</div>[/B][/SIZE] [I][SIZE=1][COLOR=#ff0000][SIZE=1][COLOR=#ff0000]<!-- End of Gallery -->[/COLOR][/SIZE][/COLOR][/SIZE][/I]
Almost there 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?
The HTML being invalid might be the cause (the ul's and dl's) but that staircasing effect happens a lot in IE with valid code. I can only tell you what happens with valid code-- usually someone has a normal, unordered list. They keep the ul as a block, leave the li's and float the anchors (and the anchors might either have a set height and width, or contain images). But IE has a problem with the not-mentioning li's. The usual fix is to add a display state for the li's. I can't seem to post HTML code correctly but if you can read this inline it's ul {whatever code you have; } li { display: inline; } then ul a { whatever you had, usually a float; }. It doesn't matter what the li's really are if the anchors are getting floated, IE just wants you to explicitly say a display state.
