Grow your CSS skills. Land your dream job.

Help With Captions

  • # September 1, 2011 at 9:00 am

    Hey Guys,

    Ran into a bit of a problem I’m not sure how to solve. I’ve got this gallery page which consists of thumbnails, each thumbnail has a caption to go with it. The problem I’m having is when a caption has more than one line of text the caption box gets bigger, that’s fine and all but I’d like the caption box to be aligned to the bottom so it looks normal.

    This is how it looks at the moment:


    And here’s the CSS:

    .ngg-caption {
    position: relative;
    padding: 5px 0 5px 25px;
    text-align: left;
    z-index: 89;
    font-size: 1.3em;
    line-height: 1.5em;
    color: #fff;
    background-color: #000;
    bottom: 32px;
    }

    I hope I’ve explained what I’m trying to do, any help would be appreciated.

    Thanks in advance.

    # September 1, 2011 at 9:19 am

    Are you using the

    element?

    Can you provide us with a link or a JsFiddle?

    # September 1, 2011 at 9:28 am

    I’m not using

    , should I be using it?

    Here’s a link: http://www.ericouture.com/gallery/test-page/

    # September 1, 2011 at 9:37 am

    If you are using images (or rather ‘figures’) with associated captions (titles) then it make sense.

    See here http://jsfiddle.net/Paulie_D/kUvb4/4/

    # September 1, 2011 at 9:44 am

    Ok, but what if I want the caption to sit on top of the image, keeping the bottom part of the caption aligned to bottom most part of the image?

    # September 1, 2011 at 10:15 am

    Here’s the problem as I see it. You have a caption with an indeterminate height (because of the varied amount of text)…so you can’t position it over the image AND have it line up to the bottom of the image because you don’t know how much to adjust the position by.

    …but I’ll have a think.

    # September 1, 2011 at 10:36 am

    OK, I’ve fiddled with the JsFiddle. The answer was to have a set height for the caption tall enough to hold two lines of text.

    Sorta works but the height won’t adjust (YET) depending on the number of lines….but I’m still thinking.

    # September 1, 2011 at 10:47 am

    Why don’t you just make the caption box big enough to accomodate two lines of text and vertically align the text in the caption to sit at the top inside the caption box?

    # September 1, 2011 at 10:47 am

    A little better (New Fiddle)

    Edit: Fiddle didn’t update…hold on!

    Re-Edit: Fixed.

    # September 1, 2011 at 10:48 am

    Ah, I can see you already thought of that. Should have read the entire thread. Apologies.

    # September 1, 2011 at 11:07 am

    That’s perfect Paulie, thanks! I’ll let you know how I get on.

    # September 1, 2011 at 4:27 pm

    Here’s an even simpler version – it eliminates the unnecessary p inside figcaption

    http://jsfiddle.net/NZKBH/28/

    # September 1, 2011 at 9:37 pm

    Thanks a bunch @wolfcry911!

    # September 1, 2011 at 9:57 pm

    Nice work @wolfcry911. I have taken it a step further just for fun: http://jsfiddle.net/sl1dr/44ZpX/

    # September 1, 2011 at 10:01 pm

    @wolfcry911, So finally I’m trying to add a credit to the thumbnail, but I’m not sure if I’m using vertical-align correctly. The aim is to have the credit centered vertically.

    Here’s my fiddle at the moment:

    http://jsfiddle.net/NZKBH/50/

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".