Help with image layout!!

[p_tru]

Hi i just want help with the klayout for my site, at the moment the layout of the pictures in jus all in one line on d center of the page.

What i wan to know is how do i layout the pictures so there are three, then below them three are another three, so basically rows of three pics??

This is my code at the moment for the layout for the pics:

[code]

while ($row= mysql_fetch_array($list_result, MYSQL_ASSOC)){

echo'<td><img class="image" width =80px height =150px src="' .$row["picture"].  '"  href="recomendation.php?id=' .$row['item_id'] . '" alt="picture"/><br>
<a href="recomendation.php?id=' .$row['item_id'] . '">' .$row['Title'].  '</a><br>' .$row['cost'].  '</td>';


}//while

[/code]

plz Help!

Petey

[k.soule]

[code]<?php

echo "<table><tr>";
while( $row = mysql_fetch_assoc($list_result) ) {    
    $cnt = 1;

    while($cnt <= 3) {
        print "<td>";

        // Your images here

        $cnt++;
    }

    print "</td></tr>";
}

?>[/code]

Terrible english discourages people from answering, if you can't take the time to talk intelligently, why should someone take the time to respond?

[k.soule]

I suppose this should even do exactly what you wanted --

[code]<?php

// echo "<table><tr>";

while( $row = mysql_fetch_assoc($list_result) ) {    
    $cnt = 1;
    while($cnt <= 3) {        
        print "<td>";
        print "<img class='image' width='80px' height='150px' src='$row[picture]'
               href='./recommendation.php?id=$row[item_id]' alt='Picture'><br>\n";          
        print "<a href='./recommendation?id=$row[item_id]>$row[Title]</a><br>$row[cost]\n";
        
        $cnt++;    
    }

    print "</td></tr>";
}

?>[/code]

[txmedic03]

That code will only cover 3 images then the while statement is done and we are back to square one.
My suggestion is to use an unordered list.

ul {
list-style-type: none;
width: 300px;
padding: 0;
}

li {
display: inline;
padding: 10px;
margin: 0;
}

Then instead of the tables, because tables are for spreadsheets not layouts, you can use <li>{image}</li> and because it is restricted by the width of the element only 3 can be displayed per line. I recommend playing with the numbers until it fits the look you want and checking it in multiple browsers. For more information on CSS, check out [a href=\"http://www.w3schools.com/css/\" target=\"_blank\"]W3Schools[/a].

This will make your code cleaner and easier to work with.

[k.soule]

Whoops! Not to even mention it printed out the same thing three times :) The below script works fine -

[code]<?php

echo "<table><tr><td>";
$cnt = 1;

while( $row = mysql_fetch_assoc($list_result) ) {
    
    print "<td>";
    print "<img class='image' width='80px' height='150px' src='$row[picture]'
            href='./recommendation.php?id=$row[item_id]' alt='Picture'><br>\n";          
    print "<a href='./recommendation?id=$row[item_id]>$row[Title]</a><br>$row[cost]\n";
      
    if($cnt == '3') {
        print "</td></tr><tr><td>";
        $cnt = 0;
    }
    else {
        print "</td><td>";
    }
          
    $cnt++;    
}

print "</td></tr></table>";

?>[/code]

[p_tru]

[!--quoteo(post=353845:date=Mar 11 2006, 04:55 AM:name=Kyle Soule)--][div class=\'quotetop\']QUOTE(Kyle Soule @ Mar 11 2006, 04:55 AM) [snapback]353845[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Whoops! Not to even mention it printed out the same thing three times :) The below script works fine -

[code]<?php

echo "<table><tr><td>";
$cnt = 1;

while( $row = mysql_fetch_assoc($list_result) ) {
    
    print "<td>";
    print "<img class='image' width='80px' height='150px' src='$row[picture]'
            href='./recommendation.php?id=$row[item_id]' alt='Picture'><br>\n";          
    print "<a href='./recommendation?id=$row[item_id]>$row[Title]</a><br>$row[cost]\n";
      
    if($cnt == '3') {
        print "</td></tr><tr><td>";
        $cnt = 0;
    }
    else {
        print "</td><td>";
    }
          
    $cnt++;    
}

print "</td></tr></table>";

?>[/code]
[/quote]

I try the code above but all it seems to do is show one picture???

plz help

Petey