1 Replies - 2125 Views - Last Post: 19 August 2013 - 11:03 AM

#1 huzi8t9  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 25
  • View blog
  • Posts: 367
  • Joined: 11-July 07

Attractive Gallery Display

Posted 19 August 2013 - 08:18 AM

Good afternoon, D.I.C.

I'm creating an image display for a customer. I want the website to display the images along side each-other, so I used float: left;. All the images are stored in the database; no dimensions are stored. I want the first picture and every other seventh image to be slightly larger than most. I have succeeded with this, by using $class = ($i % 7 == 1 ? "image_type_large" : "image_type_small";.

Because with the style-sheet, I didn't want to distort any images, I used max-width and the max-height rules. This way, the images aren't distorted, at all. However, if two rows of the smaller images are higher than the one large one at the beginning, it creates too much of a gap. I want all the images to only have a 10 pixel margin, but sometimes, they're throw into the middle and such. You can see what I mean at http://pops.clan-hq.co.uk/pictures. If it doesn't look rubbish, try clicking the "Randomise" link - it'll surely happen.

If any one could give me any advice whatsoever, it'd be great help!

Thanks in advanced, any help is always appreciated.


Is This A Good Question/Topic? 0
  • +

Replies To: Attractive Gallery Display

#2 Atli  Icon User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4240
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Attractive Gallery Display

Posted 19 August 2013 - 11:03 AM


Since this isn't really an issue with PHP, but more about HTML/CSS, I've moved this into the HTML/CSS forum.

As for the question. The problem is that the smaller images will always align to the right side a larger images on the left, until the top-left corner of the next row falls below the larger image. So if the first large image is a 100px high, and each small row 40px high, there will be a 20px margin below the larger image where no images will appear.

The best solution I can think of is to standardize the heights of the images, so that a large images will always fit the height of, say, two rows of smaller images. If you just use the max-height property, and leave out the max-width property, you should be able to achieve that fairly simply. Of course, if an image is abnormally wide, it may look weird. But at least it'll be aligned.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1