Posts Topics Forums Images
Search videos from message boards Videos Search messages from microblogs Microblogs Search messages from imdb.com Imdb Search messages from yuku.com Yuku Search messages from lefora.com (free forums) Lefora
My account: Login | Sign Up
Loading... 

Thread: picture thumbnail gallery - pics vertically aligned bottom...

Started 2 months, 2 weeks ago by johnyboy
i've got a list, each list item containing an image and then a heading. i want to achieve this somehow: in particular images vertically aligned bottom, and each image's heading vertically aligned top. the amount of text varies therefore its possible height varies, and the image's heights and width vary but are constrained to no more than 200 pixels -- so the images will be either 200 ...
Site: SitePoint : New Articles, Fresh Thinking for Web Developers and Designers  SitePoint : New Articles, Fresh Thinking for Web Developers and Designers - site profile
Forum: CSS  CSS - forum profile
Total authors: 3 authors
Total thread posts: 6 posts
Thread activity: no new posts during last week
Domain info for: sitepointforums.com

Other posts in this thread:

RyanReese replied 2 months, 2 weeks ago
Check out this example .

Paul O'B replied 2 months, 2 weeks ago
Hi, It looks more similar to this example . The easiest option would be a 2 celled table with the top td content vertically aligned bottom and the bottom cell vertically-aligned top. Of course that would mean a set number of images for each row because cells can't wrap. Otherwise If you don't want a table you would need to use display:table which isn't supported in IE7 and under. I...

johnyboy replied 2 months, 2 weeks ago
hello, oops sorry, totally neglected this thread. thanks v. much for both of the replies. i have ended up doing the margin-top subtraction based on the tallest image in the row thing. i wanted to avoid it because the images are organised and uploaded by the site owner, so it wasn't a case of simply hardcoding it once -- it needed working out dynamically (php). anyway, i've done it all ok ...

RyanReese replied 2 months, 2 weeks ago
Hi, IE could be compensated for easily via a conditional comment . (For the display table method I mean)

johnyboy replied 2 months, 1 week ago
oh right, i shall bear that in mind for future, but seeing as i've got it all working ok now using the dynamic margin top i'll stick with that. thanks. never used css tables before. something to look into.

 

Top contributing authors

Name
Posts
johnyboy
3
user's latest post:
picture thumbnail gallery - pics...
Published (2009-10-15 05:21:00)
oh right, i shall bear that in mind for future, but seeing as i've got it all working ok now using the dynamic margin top i'll stick with that. thanks. never used css tables before. something to look into.
RyanReese
2
user's latest post:
picture thumbnail gallery - pics...
Published (2009-10-14 10:52:00)
Hi, IE could be compensated for easily via a conditional comment . (For the display table method I mean)
Paul O'B
1
user's latest post:
picture thumbnail gallery - pics...
Published (2009-10-13 07:51:00)
Hi, It looks more similar to this example . The easiest option would be a 2 celled table with the top td content vertically aligned bottom and the bottom cell vertically-aligned top. Of course that would mean a set number of images for each row because cells can't wrap. Otherwise If you don't want a table you would need to use display:table which isn't supported in IE7 and under. I think the closest you can get without setting...

Related threads on "SitePoint : New Articles, Fresh Thinking for Web Developers and Designers":

Related threads on other sites:

Thread profile page for "picture thumbnail gallery - pics vertically aligned bottom..." on http://www.sitepointforums.com. This report page is a snippet summary view from a single thread "picture thumbnail gallery - pics vertically aligned bottom...", located on the Message Board at http://www.sitepointforums.com. This thread profile page shows the thread statistics for: Total Authors, Total Thread Posts, and Thread Activity