SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making php result horizontal

    I hope I explain this right.

    Right now I have data being pulled via php but it is going vertical. Like the link below.

    Code:
    http://allfoodequip.com/used-equipment.php?Cat=Baggers
    I would like to pull them horizontal like the link below.

    Code:
    http://equipmentforbakery.com/New/products.html
    Is there any tutorial that can walk me through how to do that?
    Thanks In Advance

    David

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,398
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    Looks like a <div> that is floated left, when it can not put any more items on a row it starts a new row.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As mentioned above the easiest option is to float the parent element of each block to the left and apply a suitable width, height (in ems) and margins. You will need a height because the floats will snag if they are not all the same height.

    Or if you don't want to (or can't) set a height then you could use display:inline-block as shown in this old example.

  4. #4
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried doing what was suggested but it is still going vertical

    Code:
    http://equipmentforbakery.com/New/products.php
    Heres the css I used.

    Code:
    .thumb {
    	display: inline-block;
    margin: 3px;
    padding: 5px;
    width:800px;
    }
    
    .even {}
    .odd{}
    
    #bx {
    width:850px;	
    }
    and the php looks like this

    PHP Code:
    <div id="bx" class="<?php echo $tr_class;?>">
        
        <div class="thumb"><a href="product.php?Item=<?php echo $eid?>"><img src="../UImages/<?php echo $imagename?>" width="220" height="120" alt="Thumb"></a></div>
            
            <a href="product.php?Item=<?php echo $eid?>"> <b><?php echo $name?></b></a><br />
          
           
                  
            </div><!--bx-->
    Thanks In Advance

    David

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Those items are all stuck within a div set to width 220px. (Ah, the joy of grids. )

    Code:
    HTML
    <div class="menu grid_4 alpha">
    
    CSS
    .container_16 .grid_4 {
      width: 220px;
    }
    You could change that container to read

    Code:
    <div class="products grid_16 alpha">
    You've also got this in between each image box, which also all need to be removed:

    Code:
    <div style="clear:both;">&nbsp;</div>

  6. #6
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you misread the question. I am trying to make the first 4 (that are vertical) and make them look like the bottom rows (that are horizontal.)
    Thanks In Advance

    David

  7. #7
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is all of the php if it would help

    PHP Code:
    <?php
    $Page 
    = @$_GET['Page'];
        if (
    $Page 1)
        {
        
    $Page 1;    
        }

    $LimitAmt $Amt 1;
    $Limit "LIMIT $LimitAmt";
    $NextPage $Page 1;
    $PrevPage $Page 1;

        if (
    $Page 1)
        {
        
    $Start = ($Page-1) * $Amt;
        
    $Limit "LIMIT $Start,$LimitAmt";
        }
        
    $SQLCat "";
        if (
    strlen($Cat) > 1)
        {
        
    $SQLCat "AND (`Category` LIKE '$Cat;%' OR `Category` LIKE '%;$Cat' OR `Category` LIKE '$Cat')";    
        }

        
    $SQL_GetEquipment "SELECT * FROM `new_equip` WHERE `Condition`='Used' $SQLCat $Limit";
    $R_GetEquipment mysql_query($SQL_GetEquipment$Link);

        if (
    mysql_num_rows($R_GetEquipment) < $LimitAmt)
        {
        
    $NextPage = -1;
        }

    $i 0;

    $rowclass 0;

        
    //while ($i < $num) 
        
    while ($row mysql_fetch_assoc($R_GetEquipment))
        {
            if (
    $i == $Amt)
            {
            break;    
            }
    $rowclass $rowclass;
        if (
    $rowclass >= 1){
        
    $tr_class "even";
        } else {
            if (
    $rowclass <=0) {
            
    $tr_class "odd";    
            }
        }

    //assigns variables to the mysql columns for easier retrieve
    //straight forward, if you wanted to make the "name" a link
    //somewhere else in the document, you could just type something
    //like i show below

    /*$eid = mysql_result($result,$i,"id");
    $name = mysql_result($result,$i,"name");
    $model = mysql_result($result,$i,"model");
    $manu = mysql_result($result,$i,"manu");
    $desc = mysql_result($result,$i,"desc");
    $imagename = mysql_result($result,$i,"image");*/

    $eid $row['id'];
    $name $row['name'];
    $model $row['model'];
    $manu $row['manu'];
    $desc $row['desc'];
    $imagename $row['image'];


        if (!
    file_exists("../UImages/" $imagename) || strlen($imagename) < 5)
        {
        
    $imagename "NoImage.jpg";
        }
    ?>    
        <div id="bx">
        
        <div class="thumb"><a href="product.php?Item=<?php echo $eid?>"><img src="../UImages/<?php echo $imagename?>" width="220" height="120" alt="Thumb"></a></div>
            
            <a href="product.php?Item=<?php echo $eid?>"> <b><?php echo $name?></b></a>
          
            
                  
            </div><!--bx-->
        <div style="clear:both;">&nbsp;</div>
    <?php
    $i
    ++; // This means that i is 'i = i + 1.  Will repeat this loop until it hits the value $num'  We will need to modify this a little for you
    }
    ?>
    Thanks In Advance

    David

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by laflair13 View Post
    I think you misread the question.
    No, I think you misread the answer. (Although it may not have helped, anyhow.) One of the problems (though not the only problem, is this line in your code:

    Code:
    <div style="clear:both;">&nbsp;</div>
    which forces each thumbnail to sit on a new line. But that's not the only issue.

    Your code structures at the top of the page are different from the bottom. You could try modifying this

    Code:
    <div id="bx">
        
        <div class="thumb"><a href="product.php?Item=<?php echo $eid; ?>"><img src="../UImages/<?php echo $imagename; ?>" width="220" height="120" alt="Thumb"></a></div>
            
            <a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a>
    
    </div><!--bx-->
    <div style="clear:both;">&nbsp;</div>
    to something like this:

    Code:
    <p>
      <a class="grid_4 alpha" href="product.php?Item=<?php echo $eid; ?>">
        <img width="220" height="120" alt="Thumb" src="../UImages/<?php echo $imagename; ?>">
      </a>
      <br>
      <a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a>
    </p>
    That way, the code at the top would use the same code as the layout at the bottom.

  9. #9
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still vertical.
    Thanks In Advance

    David

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    What about this then:

    Code:
    <div class="menu grid_4 alpha">
      <p>
        <a class="grid_4 alpha" title="Matrix VFFS Bagger" href="product.php?Item=<?php echo $eid; ?>">
          <img width="220" height="120" alt="Thumb" src="../UImages/<?php echo $imagename; ?>">
        </a>
        <br>
        <a href="product.php?Item=<?php echo $eid; ?>"> <b><?php echo $name; ?></b></a>
      </p>
    </div>

  11. #11
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, still vertical...lol

    Heres what I got now.

    PHP Code:
                        <?php
    $Page 
    = @$_GET['Page'];
        if (
    $Page 1)
        {
        
    $Page 1;    
        }

    $LimitAmt $Amt 1;
    $Limit "LIMIT $LimitAmt";
    $NextPage $Page 1;
    $PrevPage $Page 1;

        if (
    $Page 1)
        {
        
    $Start = ($Page-1) * $Amt;
        
    $Limit "LIMIT $Start,$LimitAmt";
        }
        
    $SQLCat "";
        if (
    strlen($Cat) > 1)
        {
        
    $SQLCat "AND (`Category` LIKE '$Cat;%' OR `Category` LIKE '%;$Cat' OR `Category` LIKE '$Cat')";    
        }

        
    $SQL_GetEquipment "SELECT * FROM `new_equip` WHERE `Condition`='Used' $SQLCat $Limit";
    $R_GetEquipment mysql_query($SQL_GetEquipment$Link);

        if (
    mysql_num_rows($R_GetEquipment) < $LimitAmt)
        {
        
    $NextPage = -1;
        }

    $i 0;

    $rowclass 0;

        
    //while ($i < $num) 
        
    while ($row mysql_fetch_assoc($R_GetEquipment))
        {
            if (
    $i == $Amt)
            {
            break;    
            }
    $rowclass $rowclass;
        if (
    $rowclass >= 1){
        
    $tr_class "even";
        } else {
            if (
    $rowclass <=0) {
            
    $tr_class "odd";    
            }
        }

    //assigns variables to the mysql columns for easier retrieve
    //straight forward, if you wanted to make the "name" a link
    //somewhere else in the document, you could just type something
    //like i show below

    /*$eid = mysql_result($result,$i,"id");
    $name = mysql_result($result,$i,"name");
    $model = mysql_result($result,$i,"model");
    $manu = mysql_result($result,$i,"manu");
    $desc = mysql_result($result,$i,"desc");
    $imagename = mysql_result($result,$i,"image");*/

    $eid $row['id'];
    $name $row['name'];
    $model $row['model'];
    $manu $row['manu'];
    $desc $row['desc'];
    $imagename $row['image'];


        if (!
    file_exists("../UImages/" $imagename) || strlen($imagename) < 5)
        {
        
    $imagename "NoImage.jpg";
        }
    ?>    
        <div class="menu grid_4">
      <p>
        <a class="grid_4 alpha" title="Matrix VFFS Bagger" href="product.php?Item=<?php echo $eid?>">
          <img width="220" height="120" alt="Thumb" src="../UImages/<?php echo $imagename?>">
        </a>
        <br>
        <a href="product.php?Item=<?php echo $eid?>"> <b><?php echo $name?></b></a>
      </p>
    </div>
    <?php
    $i
    ++; // This means that i is 'i = i + 1.  Will repeat this loop until it hits the value $num'  We will need to modify this a little for you
    }
    ?>
    Thanks In Advance

    David

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you need to float #bx . Basically you floated the child of #bx, which doesn't quite work because the parent is still a normal block taking up the full width. You also need to remove the width set on it, because right now it's taking up the full width of the column . Or you can set a fixed width (that is less than 650, but allows items to be horizontal) on it.

    You also need to remove every single
    <div style="clear:both;">&nbsp;</div> you have on that section. It will never let the floating work . How many do you want horizontally aligned? Looks like the page can only comfortably fit 2 in a row, MAYBE 3 if you squish it.


    [code]#bx{float:left;}
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  13. #13
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do have the #bx floating left


    .thumb {
    float: left;
    overflow: auto;
    }

    .even {}
    .odd{}

    #bx {
    float: left;
    }
    Thanks In Advance

    David

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It worked for me in testing with Firebug by editing the HTML (although the CSS is not perfect), but the system is somehow adding in an extra

    Code:
    <div class="menu grid_4">
    which is messing things up. I don't understand the PHP well enough to understand why that's being inserted. Looks like it's coming from above that PHP block you posted.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Are you sure? I went to your stylesheet, found the #bx, and this is all that's applied
    Code:
    #bx {
    width:650px;	}
    This is the code in the section. I took a bit from above it and below it. This is what's showing
    Code:
    .thumb {
    
    	float:left;display:inline;clear:none;}.ProductWrap {	float:left;	vertical-align:top;margin-left:5px;display:inline;}.even {}.odd{}#bx {width:650px;	}#AdminMsg {	margin-top:25px;	text-align:center;	background-color:#FFCC00;	}	#product{width:600px;margin-right: auto ;}
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  16. #16
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you looking at this page?

    Code:
    http://equipmentforbakery.com/New/products.php
    Thanks In Advance

    David

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That link is showing hte products going horizontal. I'm very confused now. I thought your objective was to get the other link displaying horizontally? . Sorry for being dense.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  18. #18
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To make it easy... I want

    Code:
    http://equipmentforbakery.com/New/products.php
    to look like

    Code:
    http://equipmentforbakery.com/New/products.html
    Thanks In Advance

    David

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,601
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    So basically you want that stuff to be horizontal. Gotcha.

    Well it looks like on this element below, you have a width of 220px set. Which makes it impossible for anthing to be on teh same line because there just isn't enough width.
    Code:
    .container_16 .grid_4
    {
    /*remove the width:220px;*/
    overflow:hidden;/*add*/
    }
    I changed those two things and it worked. It's now displaying horizontally. You'll have to tinker with some widths to get 4 displaying on a row (currently 3) but that's simple. If you need help with it though, feel free to shout .

    Edit-Just so you know, that suggestion will make EVERYTHING horizontal. I can offer code if you want to select a specific section in that page, but for now, that code will select all the products (basically everything with a .grid_4 class )
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It seems you have made the items go horizontal now but because you used floats and the elements are different heights they are snagging when they wrap exactly as I mentioned in my first post .

    You need to use inline-block so add this code without alteration after all your existing code:

    Code:
    .menu {
    	float:none!important;
    	display:inline-block;
    *display:inline;/* ie6/7 inline-block hack - do not change order or remove anything */
    	zoom:1.0;/* ie6/7 inline-block hack*/
    	vertical-align:top;
    	margin-bottom:10px;
    }


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
  •