SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertical align images in horizontal list

    Hello,

    I seem to be having trouble aligning a list of images along their bottom to the bottom of the li in a horizontal list (using float:left). The list being used as an image-only menu. The top of the images (which also happen to be links) are always aligned to the top of li element. I want the exact opposite (bottom to bottom).

    Here's my css:
    Code:
    ul#mainlevel-configs{ list-style-type:none; }
    ul#mainlevel-configs li {float:left; padding:10px 5px 0px 0; height:165px;}
    #mainlevel-configs li img, #mainlevel-configs li a { vertical-align:bottom;}
    Here's how it looks on FF right now: PS: it looks stacked because the container width is limited.. that's how i want it.

    The only thing that came remotely close to being the way i want it is when i applied the css directly to the a:link. But in this case, the bottom of the images were aligned to the top of the li element. Anyway, here's the code for that
    Code:
    a.mainlevel-configs:link {vertical-align:bottom}
    Can someone pls help?

    - V

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try setting position: relative on the <li> and then position: absolute; bottom: 0; left: 0; on the li img.

  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow! tyssen, your solution *almost* works except for the fact that all bunch up to the left side of the ul. so, i set a width for the li and they spread apart. however, the images are of different width. so, the only common width that fits them all is too wide.

    i want the stacking to be pretty much the same as the image above, except for the image alignment being bottom.

    thanks though.. i really like your approach.. i'm gonna play with it.

    - V

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What happens if you do left: 50% instead?

  5. #5
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no nothing really happens.. the bunched up images moved a little to the right.

    - V


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
  •