SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2003
    Location
    India
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS thumbnails placement

    Hi,

    I need to show thumbnail images and description of image below it.

    I made a page at

    http://www.webcash.in/fp/image_problem.html

    It works fine if image description is all same size. If one of the image description is lengthy, the image placement will not work. Just mouse over the link "Change Image Caption", it will change description of the 3rd image with a lengthy text and the image placement will go wrong.

    Is there any solution for this problem ? I need to use CSS for displaying the images, still it work like tables (if i put the image in table, lengthy description of image will not make the image placement like this).

    Thanks,

    Yujin

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Is there any solution for this problem ?
    No, I'm afraid the only solution would be to increase the height of each block so that they are all the same, which would mean accommodating the largest caption you might get. Obviously this isn't a good solution but unfortunately it is the only solution when floating like this. If the heights are unequal then floats will snag and there's nothing that can be done about this.

    I shouldn't link to this really because its my article but this is the nearest solution to the problem that exists (no one else so far has achieved this).

    The solution provided in the link is working on widthless and heightless elements but in your case you have a fixed width and therefore the solution will work in IE when a width is specified so you will need to amend the demo accordingly.

    However its a complicated method and if you can live without it and maybe just fix the height and crop the caption then life will be easier for you

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternatively you could surround each row with a <div> with 100&#37; which would force the next row completely underneath or use a clear on the 5th, 9th, 14th image etc.

    If you're populating this dynamically then you'd probably need to put some kind of rule in that after every 4 images a clear is put in but I've certainly seen somehting like that done before.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I've added a couple of demos for fixed width and height.

    http://www.pmob.co.uk/search-this/stcaption3.htm
    http://www.pmob.co.uk/search-this/stcaption4.htm

    Tables can't do that


    Quote Originally Posted by dave
    Alternatively you could surround each row with a <div> with 100&#37; which would force the next row completely underneath or use a clear on the 5th, 9th, 14th image etc.
    Hi Dave, that would limit the layout to only a certain number of images per row which is a good solution if you always want x number of images per row but is awkward as you say in a dynamic situation.

    You could not however use a clear on every 5th image however because in Ie the 6th float will still snag. The clear only applies to the 5th image and the 6th image still gets pinned to the longer caption. It may work in Firefox but it won't in IE. In IE you have to do what you first said and enclose each row in a div which is set to clear both (the div must have a clearing technique applied).

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, it's certainly not very flexible but I've used it in the past when dealing with fixed width images and a fixed width layout.

    For something where you're dealing with a liquid layout and want the images to take up as much space as is available then this obviously isn't possible using this method.

    Good point about IE, I knew there was a reason why I used the row method Would the same be true if you used a <br>?

    You're wanting a line-break so I'd say this was the correct use of the tag but would the image still snag in IE6? (I would check myself but just got in from football training and it was lashing it down, presume you'd know something like that off the top of your head anyway )

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Good point about IE, I knew there was a reason why I used the row method Would the same be true if you used a <br>?
    How would you fit a break into a collection of floated lists The break would have to be outside of the list which means closing the ul. If you are closing the ul then you may as well use that as the clearer. If you changed the list to something non semantic like a p tag then you could insert a break at every 5th position as long as the break is set to clear:both.

    This has been a bugbear of mine for years and the solutions I offered above are the best that I have seen. The 3rd example only relies on the images being a fixed width and works pretty well and in a way that tables could never hope to replicate.

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, my comment was aimed at the markup used by the original poster which uses <div>'s to contain each img and caption and therefore the <br> could be placed in every fifth position

    Obviously this wouldn't make sense if a list was used, as you've pointed out

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Obviously this wouldn't make sense if a list was used, as you've pointed out
    Yes, sorry I was thinking of my code and not the original


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
  •