1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Captions under thumbnails in the Photography template

Discussion in 'Web Development' started by chasm, Feb 13, 2009.

  1. chasm

    chasm New Member

    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!
     
    chasm, Feb 13, 2009
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    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.:D
     
    ishkey, Feb 13, 2009
    #2
  3. chasm

    chasm New Member

    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 -->
     
    chasm, Feb 13, 2009
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    ishkey, Feb 13, 2009
    #4
  5. chasm

    chasm New Member

    Yep. That template.
     
    chasm, Feb 13, 2009
    #5
  6. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    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]
     

    Attached Files:

    ishkey, Feb 13, 2009
    #6
  7. chasm

    chasm New Member

    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
     
    chasm, Feb 14, 2009
    #7
  8. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    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]
     
    ishkey, Feb 14, 2009
    #8
  9. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

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

    Attached Files:

    ishkey, Feb 14, 2009
    #9
  10. chasm

    chasm New Member

    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

    mess.JPG

    Do I not worry about it and post a big disclaimer on my page that warns users the page works in IE only? :)
     
    chasm, Feb 14, 2009
    #10
  11. Stomme poes

    Stomme poes New Member

    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.
     
    Stomme poes, Mar 20, 2009
    #11