SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image alignment ???

    Hi,

    I'd like for someone to look at the page provided and tell me if there is a way to make the images shown align at the bottom rather than the top.

    You can see by aligning at the top the descriptions below are not uniform and it looks funky.

    Here's the page..
    http://karenwilliamson.com/catalog/i...index&cPath=50

    Thanks for any input.

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe that qualifies as tabular data, meaning you should use a table. Just have two rows and set the height on the first to something like 70 pixels and a vertical align of bottom, and the descriptions will start on the same line.

    <table id="products">
    <tbody>
    <tr class="images">
    <td><img></td>
    </tr>
    <tr>
    <td><p>content</p></td>
    </tr>
    </tbody>
    </table>

    table#products { border-collapse:collapse; }
    table#products tr.images td { vertical-align:bottom; height:70px; }
    table#products tr.images td img { display:block; } /* to avoid having 3-4 pixel gaps below your images for descenders */

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    I believe that qualifies as tabular data, meaning you should use a table. Just have two rows and set the height on the first to something like 70 pixels and a vertical align of bottom, and the descriptions will start on the same line.
    I wish it were formatted in a table. It's a zencart template and there is multiple files that have to be edited to keep things consistent so I'm gonna leave it be. I installed a mod that displays items horizontally with x amount per row so I might just go back to vertically alinged if the client doesn't like it.

    Thanks for responding though, you're reply inadvertently helped me with another issue

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I'd like for someone to look at the page provided and tell me if there is a way to make the images shown align at the bottom rather than the top.
    It can be done but its not for the faint-hearted

    These examples are not the same as your example but the techniques will allow for it.

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

    (You'll find the articles somewhere in my sig).

    It's a lot of effort to implement so I would try and avoid the issue if you can.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2001
    Location
    St. Louis, MO
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,
    It can be done but its not for the faint-hearted

    These examples are not the same as your example but the techniques will allow for it.

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

    (You'll find the articles somewhere in my sig).

    It's a lot of effort to implement so I would try and avoid the issue if you can.
    Thank you. I bookmarked your pages as I intend on spending some signifigant time learning to design with .css. I'm not completely wet behind the ears but nowhere close to where I need to be.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My thoughts would be to decide the maximum height that any of the pictures will be (and limit them to that), then apply a top padding to the product box equal to that dimension. Applying an equal negative top margin to the image will then pull it back up to the top of the container, aligning the tops of the images, but the descriptions will be lined up below the padding.


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
  •