SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to set up a (if) condition within a looped <table> to break left floating.

    PHP Code:
     $query "SELECT shoe.shoename, shoe.price, shoe.moreinfo 
    FROM shoe
    INNER 
    JOIN shoe_kind 
    ON shoe.kind_id=shoe_kind.kind_id"

    $result mysql_query($query$connection);
    while (
    $row mysql_fetch_array($result)) {
    echo 
    "<table style=\"float:left\">
    <td width=\"150\" style=\"text-align:center;\">" 
    $row['shoename'] . "</td>
    <tr>
    <td height=\"100\" width=\"100\"   style=\"position:relative;\">
    <img src=\"../images/shoesname.jpg\" alt=\"sd\" width=\"97\" height=\"80\"  border=\"1\" style=\"border-color:#FF6600;\" />
    </td></tr>
    <tr>
    <td width=\"5\" height=\"21\" ></td><td>" 
    $row['price'] . "</td>
    </tr>
    <td>" 
    $row['moreinfo'] . "</td>
    </table>"
    ;

    The code above contains a while loop that floats all the elements within that table to the left. Now I want the floated elements to repeat to the left only under the condition that when it repeats four times to the left to stop and go down and continue below is an ilustration of what I been trying to accomplish example:

    Instead of repeating to the left all the time like this:

    - - - - - - - - - - - -

    I want the loop to stop when it repeat four times and then go down again and repeat four more and so on. example:

    - - - -
    - - - -
    - - - -
    - - - -

    Like that.

    Any body can help me?

    I tried the relative position but then it keep repeating to the left endlessly, tried the absolute position but it just show the last repeated element of the loop.

    it there any other option which you might come up with guys?
    Last edited by co.ador; May 9, 2009 at 13:33.

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This uses a nested tables approach:

    PHP Code:
    <?php
    $query 
    "SELECT shoe.shoename, appetizers.price, shoe.moreinfo 
    FROM shoe
    INNER 
    JOIN shoe_kind 
    ON shoe.kind_id=shoe_kind.kind_id"

    $result mysql_query($query$connection);

    // initialize the counter
    $count 1;

    //get the container table started
    echo "<table border=\"1\"><tr>";


    while (
    $row mysql_fetch_array($result)) { 

    // create a table with four rows and one column that represents one <td></td> in the container table
    echo "<td><table border=\"1\"><tr>
    <td>" 
    $row['shoename'] . "</td>
    </tr> 
    <tr>
    <td><img src=\"../images/shoesname.jpg\" alt=\"sd\" width=\"97\" height=\"80\"  border=\"1\" style=\"border-color:#FF6600;\" /> </td>
    </tr> 
    <tr> 
    <td>" 
    $row['price'] . "</td> 
    </tr> 
    <tr>
    <td>" 
    $row['moreinfo'] . "</td>
    </tr></table>
    </td>"
    ;

    // if there are four in a row, start a new row
    if ($count == 4) {
    echo 
    "</tr><tr>"
    }
    $count++;

    //reset the counter after four
    if ($count == 5)
      
    $count 1;

    // finish off the containter table
    echo "</tr></table>";
    ?>

  3. #3
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you JDevereux

    I have just inserted a table outside the php tags so that instead of keep going to the left it pushs it down. But I will try your to see how it works with both. What I a did was:

    PHP Code:
    <table width="40%" border="0" cellspacing="0" cellpadding="0" bordercolor="#FF0033" bgcolor="#FFFFFF" id="shoetable">
    <?php $query "SELECT shoe.shoename, shoe.price, shoe.moreinfo 
    FROM shoe
    INNER 
    JOIN shoe_kind 
    ON shoe.kind_id=shoe_kind.kind_id"

    $result mysql_query($query$connection);
    while (
    $row mysql_fetch_array($result)) {
    echo 
    "<table style=\"float:left\">
    <td width=\"150\" style=\"text-align:center;\">" 
    $row['shoename'] . "</td>
    <tr>
    <td height=\"100\" width=\"100\"   style=\"position:relative;\">
    <img src=\"../images/shoesname.jpg\" alt=\"sd\" width=\"97\" height=\"80\"  border=\"1\" style=\"border-color:#FF6600;\" />
    </td></tr>
    <tr>
    <td width=\"5\" height=\"21\" ></td><td>" 
    $row['price'] . "</td>
    </tr>
    <td>" 
    $row['moreinfo'] . "</td>
    </table>"
    ;

    ?></table>

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On second thought, you could use the CSS clear property:

    PHP Code:
    <?php

    $count 
    0;
    while (
    $row mysql_fetch_array($result)) { {
    if (
    $count == 4) {
    echo 
    "<table style=\"float:left; clear: left;\">"
    }
    else { 
    echo 
    "<table style=\"float:left\">";
    }
    echo 
    "<td width=\"150\" style=\"text-align:center;\">" $row['shoename'] . "</td>
    <tr>
    <td height=\"100\" width=\"100\"   style=\"position:relative;\">
    <img src=\"dog.jpg\" alt=\"sd\" width=\"97\" height=\"80\"  border=\"1\" style=\"border-color:#FF6600;\" />
    </td></tr>
    <tr>
    <td width=\"5\" height=\"21\" ></td><td>" 
    $row['price'] . "</td>
    </tr>
    <td>" 
    $row['moreinfo'] . "</td>
    </table>"
    ;
    $count++;
    if (
    $count == 5)
      
    $count 1;

    ?>

  5. #5
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was forgetting about the css clear property.

    It pushes it down.

    Thank you JDevereux

    right now I am working at work but when I come back around 12:00 am I will get my hands on both of the options you gave me.

  6. #6
    SitePoint Wizard co.ador's Avatar
    Join Date
    Apr 2009
    Posts
    1,054
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JDevereux

    Your works good I just need to add it style it to top and left to it position at the point I wanted.

    Thank you


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
  •