SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with CSS Image Gallery

    Hi all,

    Iím putting a thumbnail gallery on my site using CSS like this:

    #container .issue {
    float: left;
    width: 220px;
    margin: 0 5px 0 0;
    padding: 0 0 0 5px;
    }

    #container .issue .issuePicture {
    height: 50px;
    margin: 0;
    padding: 0;
    border: 1px solid #3B3B3B;
    }

    ...with each thumbnail using HTML like this:

    <div class="issue">
    <div class="issuePicture">issues/sp06/media/sp06Thumb.jpg</div>
    Spring 2006 ¶ Volume 103 Number 1
    </div>

    I like this approach, because it makes it very easy to add/subtract images wherever Iíd like. However, there is a problem: this thumbnails are within a 930px container - with the margin and padding settings set in the .issue class above, thereís no way to make the thumbnails fit that 930px container exactly (there will always be extra space, either to the left or the right, thus unnecessarily pushing some thumbnails to new lines).

    I guess my question is this: is there any way to modify this thumbnail gallery idea so that the thumbnails span the entire 930px, with the spacing between the thumbnails all being adequate?

    Let me know if this isnít clear. Thanks for your help.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    May I ask for a link to the page in question so I can see how the gallery is laid out with respect to the rest of the site's layout?

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    May I ask for a link to the page in question so I can see how the gallery is laid out with respect to the rest of the site's layout?
    Definitely -
    http://iguanaworks.net/~seraphim/CEM/issues.php

    As you can see, those little rectangle links don't line up exactly on the left and right with the larger image box at the top.


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
  •