SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Building a gallery of thumbnails.

    So, I am wrestling with a gallery of thumbnails. Looking at Google Images, they manage to have images of a variety of widths line up with a set padding between each. I guess that just takes leaving off the width for the css rule handling each thumbnail?

    But they also manage to center vertically any image less tall than the space allotted to each row. Is this possible in CSS or are they using Ajax or something else to accomplish this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Have a look half way down this page and see if that's what you need:

    http://gtwebdev.com/workshop/layout/...ck-gallery.php

    CSS certainly can handle this, if I understand what you are describing.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. It looks almost right, though it doesn't have the vertical centering if elements that aren't as tall as the max for each row.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Are you working with a set height and width for the parent?

    If so you could do something like this:
    http://www.pmob.co.uk/temp/caption24.htm

    The image is centred vertically by setting the line-height to the same as the available height. Ie7 and under need the hack though.

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thumbnails themselves don't have a fixed height and width but I was thinking of having each row be a set height. That looks like it might work, thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •