Images in fluid layout
Okay so I want to display a series of images on a line... not multiple lines.
Problem is I don't know how much space I will have. I will only be able to fit 2, maybe 3 on an 800x600 while I could fit more in 1600x1200...
How should I combat this issue so as to not overload an 800x600 user with the # of images yet not being "too empty" in the 1600x1200?
SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!
Megan posted this at 14:12 — 31st March 2007.
She has: 11,421 posts
Joined: Jun 1999
Is this a photo gallery or is it something decorative? In a photo gallery I use lists and float the photos so they show as many as can fit on a line for each screen resolution. See here. If you wanted only one line you could use overflow:hidden to hide anything that falls outside of a containing div or your ul.
For something decorative you could use a background image.
Megan
Connect with us on Facebook!
Triexa.com posted this at 16:21 — 31st March 2007.
They have: 173 posts
Joined: Feb 2005
I'm having a mind block! What if not all the images are the same width?
SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!
Triexa.com posted this at 16:44 — 5th April 2007.
They have: 173 posts
Joined: Feb 2005
I have done essentially what you have done, but the problem is that if it does not fit then there will be "extra" space on the right-hand side.
Is there some way I can center it? It's not like I will know the width the pictures will take up, so...
SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!
demonhale posted this at 03:44 — 1st April 2007.
He has: 3,278 posts
Joined: May 2005
You could always use cut thumbnails then show the larger complete image when clicked. Megans suggestion of using overflow could help the page adjust to the images listed. If you use percentages for image containers, any image outside the range of the screen will be pushed below it. But you must explain what you specifically need to do with the images...
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.