Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts

    How should I approach this?

    I am wanting to make a product list page with PHP.

    At the moment I using this code:
    PHP Code:
    $query "select * from products where category = 'Belts'";
    $result mysql_query($query);
    while(
    $row=mysql_fetch_assoc($result)) {
        echo 
    $row['name'];

    The result is something like this:
    http://i51.tinypic.com/2w56ljq.png

    What I want is for them to be aligned like this:
    http://i53.tinypic.com/w811tz.png

    Eventually, I am also going to include an image with each product.
    How would I go about alignment? With CSS or PHP?
    Last edited by Democrazy; 09-15-2011 at 12:10 PM.

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    128
    Thanks
    2
    Thanked 21 Times in 21 Posts
    How i always do this:

    PHP Code:
    query "select * from products where category = 'Belts'";
    $i 0;
    $result mysql_query($query);
    while(
    $row=mysql_fetch_assoc($result)) {
        
    $i++;
        echo 
    $row['name'];
        if(
    $i == 4) {
            echo 
    "<br />";
            
    $i 0;
        }

    Now, After each fourth product there will be placed a BR (New line)

    The allignment must be done with CSS, because this can't be done with PHP.
    What you could do:
    1. Make a div and put there all the product info in
    2. Make a span where you will put the product name in
    3. Make a div where you put a image in.
    4. Give all the div's and maybe the span a class.
    5. Now use CSS to set everything in place.
    6. Done
    NOTE: You could also change step 3 with: Place a IMG tag
    Last edited by Wanna; 09-15-2011 at 12:23 PM.

  • #3
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,456
    Thanks
    8
    Thanked 1,084 Times in 1,075 Posts
    Your desired output is tabular ... which means using <table>.
    That's exactly what <table> is designed for.

    PHP Code:
    <?php

    $query 
    "select * from products where category = 'Belts'";
    $result mysql_query($query);

    // begin the <table>
    $index=0;
    echo 
    "<table cellspacing='5'>";

    // loop through query results
    while($row=mysql_fetch_assoc($result)) {
       if(
    $index==0){
       echo 
    "<tr>";
       }
        echo 
    "<td>".$row['name']."</td>";
       
    $index++;
          if(
    $index==4){
          echo 
    "</tr>";
          
    $index=0;
          }
    }  

    // append <tr> if row not complete
    if($index 0){
    echo 
    "</tr>";
    }

    // close <table>
    echo "</table>";


    ?>




    .

  • Users who have thanked mlseim for this post:

    Democrazy (09-15-2011)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    128
    Thanks
    2
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by mlseim View Post
    Your desired output is tabular ... which means using <table>.
    That's exactly what <table> is designed for.

    PHP Code:
    <?php

    $query 
    "select * from products where category = 'Belts'";
    $result mysql_query($query);

    // begin the <table>
    $index=0;
    echo 
    "<table cellspacing='5'>";

    // loop through query results
    while($row=mysql_fetch_assoc($result)) {
       if(
    $index==0){
       echo 
    "<tr>";
       }
        echo 
    "<td>".$row['name']."</td>";
       
    $index++;
          if(
    $index==4){
          echo 
    "</tr>";
          
    $index=0;
          }
    }  

    // append <tr> if row not complete
    if($index 0){
    echo 
    "</tr>";
    }

    // close <table>
    echo "</table>";


    ?>




    .
    Noo, Dont use tables.

    Do this with div's and CSS

  • #5
    Senior Coder
    Join Date
    Feb 2011
    Location
    Your Monitor
    Posts
    4,282
    Thanks
    57
    Thanked 523 Times in 510 Posts
    Blog Entries
    5
    I personally don't really think this is a PHP issue more of a html/css layout issue.
    See my new CodingForums Blog: http://www.codingforums.com/blogs/tangoforce/

    Many useful explanations and tips including: Cannot modify headers - already sent, The IE if (isset($_POST['submit'])) bug explained, unexpected T_CONSTANT_ENCAPSED_STRING, debugging tips and much more!

  • #6
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Wanna and mlseim, both your ways sound like they will achieve what I think I am looking for.

    I am first going to test out mlseim's way, because cellpadding to me yells out better layout customization, which is what I need, because I am a very perfectionist person.


    tangoforce,
    I know where your coming from. I think the solution is CSS implemented through PHP.

    I'm off to have a work out session to make up for the last 8 hours of sitting on the computer. I will try out miseim's solution and report back my outcome.

  • #7
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    mlseim,

    your solution worked.

    While it still hasn't sunk into my head what is going on in the code, I understand exactly what it is doing.
    I thank you and can't thank you enough.

    The brain is a funny place. Tomorrow I will wake up and understand your code perfectly.

    Thank you again man!

  • #8
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,456
    Thanks
    8
    Thanked 1,084 Times in 1,075 Posts
    Don't totally dismiss what Wanna is saying ...
    <table> tag properties will disappear with HTML5, and will require global CSS elements.

    My point is ...
    You want a nice layout, done quickly, and looks good on different browser sizes.
    Continue on with your site, but start "working on the side" to duplicate your
    tabular data using CSS only. I just know that I can spend 1 minute making a
    table that works, and spend 180 minutes trying to make it look the same with CSS.

    It's probably my fault, but who cares? I'm the one spending the time doing it.



    .

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    128
    Thanks
    2
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by mlseim View Post
    Don't totally dismiss what Wanna is saying ...
    <table> tag properties will disappear with HTML5, and will require global CSS elements.

    My point is ...
    You want a nice layout, done quickly, and looks good on different browser sizes.
    Continue on with your site, but start "working on the side" to duplicate your
    tabular data using CSS only. I just know that I can spend 1 minute making a
    table that works, and spend 180 minutes trying to make it look the same with CSS.

    It's probably my fault, but who cares? I'm the one spending the time doing it.



    .
    Indeed, For a quick solution a table is ok.
    If you have some experience with CSS, Try to make it look like your example.

  • #10
    Banned
    Join Date
    Sep 2011
    Posts
    140
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I will defiantly be using CSS to fine align things.

    I find HTML5's version-less model a problem - if you write a blog using an element that later becomes obsolete, it means you would have to go back and change those old blog HTML files for them to become standard complaint again. that is a burden and I have a zero policy against non-valid HTML documents being published.
    A version number with HTML5 would have prevented this and I have even press Ian Hickson on the problem several times, but he doesn't seem to understand, so it looks like I won't be using HTML5 ever.
    Last edited by Democrazy; 09-16-2011 at 03:41 AM.

  • #11
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,456
    Thanks
    8
    Thanked 1,084 Times in 1,075 Posts
    Further reading, it looks like the actual <table> tag will remain with HTML5,
    but the only <table> property recognized will be "border". That means you'll have to
    use global or inline CSS to affect padding, centering, fonts, etc. I guess we'll see.


    .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •