SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Orderng stock in rows of 3 down the page

    Happy new year everyone, good to be back on here.

    I had developed a part of a website where a client uploads their stock to the database, and then on choice of category the stock is displayed nicely in rows of three down the page, but as always I didnt take into consideration that some stock will have a longer image which I cant get around and so the row beneath that then gets pushed all out, and its loses its shape.

    Basically what I would like to have is that even if say one of the images in the row above makes that stock area longer, the row underneath starts below that one, and continues in a nice row, and so on down the page.

    Here is my code, which works fine when all the stock areas are the same, but wondered if anybody can help me with this.

    Code:
    <div id="sub_stock_holder">
    <?php 
      $qw=mysql_query("select * from stock where (sub_Category='$parentcat') and stock_Active=1");
      while($r=mysql_fetch_assoc($qw)){ 
    ?>
    <div class="sub_stock" style="background-color:#990;">
    <div class="sub_title"><?=substr($r['stock_Name'],0,62)."..."?></div>
    <div class="sub_Image"><a href="detail.php?stock_ID=<?=$r['stock_Id']?>" title="<?=$r['stock_MetaTitle']?>"><img src="./adminSallam/<?=$r['stock_Image']?>" width="210" title="<?=$r['stock_MetaTitle']?>" border="0" style="border:#333333 solid 1px;" alt="<?=$r['stock_MetaTitle']?>" /></a></div>
    <div class="sub_Description"><p><?=substr($r['stock_Description'],0,100)." ..."?></p></div>
    <? if ($r['stock_Sold'] == "0") { ?>
    <div class="sub_Price"><?=$r['stock_Price']?></div>
    <? } else { ?>
    <div class="sub_Price">SOLD</div>
    <? } ?>
    <div class="sub_move" style="position:relative; width:100%; margin-top:15px; text-align:center;"><a href="detail.php?stock_ID=<?=$r['stock_Id']?>" title="Click here to view '<?=$r['stock_Name']?>' in full.">click here to read more</a></div>
    </div>
    <? } ?>
    </div>
    The site and its obvious problem is below:

    http://www.accendsandbox.co.uk/stock...catName=Silver

    Thanks

  2. #2
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,747
    Mentioned
    64 Post(s)
    Tagged
    0 Thread(s)
    Well, aside from using PHP to do this, have you tried CSS solutions? (Wrap a row of items in another DIV so that it acts as a solid unit?)

    You could also use PHP/HTML to enforce a height restriction on images...

    PS: I'm not a CSS Guru, so what I suggested above may be considered a CSS sin.
    Tagging a couple of people for input; our member of the month @ronpat and CSS Guru of the Year @Paul O'B
    Never grow up. The instant you do, you lose all ability to imagine great things, for fear of reality crashing in.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi StarLine,

    I think I tagged them correctly, so will wait and see what they say.

    The css way works with div's and that would be an answer to it, but to try and get it working seems a no go as my php isnt set out correctly I dont think.

    Thanks anyway

  4. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    4,807
    Mentioned
    141 Post(s)
    Tagged
    0 Thread(s)
    Your PHP looks fine, I had the same issue and the only thing I could do was place the three elements into a div in my PHP output, and make that div clear the float of the CSS, so it would keep each group on a separate line. That then forces gaps between groups (which for me was undesirable), but it was the only outcome I could acheive.
    Be sure to congratulate xMog on earning April's Member of the Month
    Go ahead and blame me, I still won't lose any sleep over it
    My Blog | My Technical Notes

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ye I see what you mean, and its a bit of a tricky one isnt it.

    Glad you got stumped by it though, I wasnt sure to post it as it seemed a bit silly.

    Will give that a go and see.

    Thanks

  6. #6
    SitePoint Wizard silver trophybronze trophy Cups's Avatar
    Join Date
    Oct 2006
    Location
    France, deep rural.
    Posts
    6,869
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Possibly use CSS to resize the photo to a max length?

  7. #7
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmm, that possibly could work and then just stretch the wrapper div for each one to a maximum length then too.


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
  •