Forums

realph

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.

Paulie_D

Are you using the

<figcaption>

element?

Can you provide us with a link or a JsFiddle?

realph

I'm not using

<figcaption>

, should I be using it?

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

Paulie_D

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/

realph

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?

Paulie_D

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.

Paulie_D

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.

tannercampbell

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?

Paulie_D

A little better (New Fiddle)

Edit: Fiddle didn't update...hold on!

Re-Edit: Fixed.

tannercampbell

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

realph

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

wolfcry911

Here's an even simpler version - it eliminates the unnecessary p inside figcaption
http://jsfiddle.net/NZKBH/28/

realph

Thanks a bunch @wolfcry911!

joshuanhibbert

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

realph

@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/

wolfcry911

Try this
http://codepen.io/wolfcry911/pen/CoJqH

realph

Perfect @wolfcry911, why didn't I think of using a background image? You've been a huge help, I owe you one!

Thanks again!

treehouse : what would you like to learn today?

Forums

Help With Captions