SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Nicely Aligned Products From A Database?

    Hi,

    I am publising products from a database into boxes however the boxes are different heights based on the title. This is changing the height of each box and therefore misaligning the boxes on the next row.

    Does anyone know how to neatly aligned the height of boxes as per following example regardless of home much content a single box has:

    http://www.pinesolutions.co.uk/dinin...dining-chairs/

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,247
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    there is nothing misaligned using IE9
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937 View Post
    there is nothing misaligned using IE9
    He's using that site as an example.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    You have a couple of options.

    the sample site , uses fixed heights. If you noticed the longer headlines run closer to the product shots. The box aren expanding at all, thus there is a set size to the grid object ( even if it were to be based on EMs , the height is still 'fixed') thus the grid is preserved that way.

    A mixed method ( a lil clumsy with the mark up, and not supported by older browsers and IE) and would be to have your PHP output each row as a separate UL, then set the it to display table/ table-row... and set the LIs display:table-cell.

    Hope that helps.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Brilliant, thanks.

    In the example how do they fix the height. I didn't think you fix the height of a div?

    Do I just use this: height:100%;

    If so is 100% a suitable height. How do I work out what height I set it to. Do I set the height of the DIV within the frame so:

    Description: 20%
    Image: 50%
    Price: 20%
    Then a spare gap at the bottom?

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Well it's LIs ( but any block element can have explicit dimensions )
    width: (px, ems, %, etc.)
    height: (px, ems, %, etc.)

    ALSO , in case you didnt remember padding, border will add to the calculated dimension of the object. So... if you give it: height:100px width:50px and 10px of padding and a border of 2px then your actual object size on the screen is 74px X 124px, as an example.

    NOTE that height% is calculated based on the width!!! Yah..it's nuts.. dont use %s for height.

    Anyway, what I meant is size teh DIV or LIs that you're laying out specifically. For an over simplified example:

    .productList li { height: 320px; width:160px; float:left; }

    ADDENDUM:

    if you set the height of the container LI to a specific NON % value. You can THEN use % for the child elements of the LI. Still not a wise idea .. but you can.

  7. #7
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thanks, so I can fit the height in pixels. I have the width in %

    If screensize changes will it keep the height in pixels so instead of looking nice and rectangular they look like tall vertical strips with the image squashed vertically?

  8. #8
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,821
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    Brilliant thanks, so I can fit the height in pixels. I have the width in %

    If screensize changes will it keep the height in pixels so instead of looking nice and rectangular they look like tall vertical strips with the image squashed vertically?
    Can you supply a link to the site or sample sizes of the images and the fixed container size?

    I scale thumbnails with the maximum height and width set to 128px. Thumbnails in container size 132px.

    The thumbnail is positioned with the following:

    HTML Code:
    <a href='#'>
       title goes here
      <img src='thumb_nail.jpg' style='max-height:128px; margin:0 auto; text-align:center' alt='#' />
    </a>


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
  •