Jump to content

Archived

This topic is now archived and is closed to further replies.

p_tru

Help with image layout!!

Recommended Posts

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

Share this post


Link to post
Share on other sites
[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?

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
[!--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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.