Jump to content


Photo

Help with image layout!!


  • Please log in to reply
5 replies to this topic

#1 p_tru

p_tru
  • Members
  • PipPip
  • Member
  • 11 posts

Posted 11 March 2006 - 03:01 AM

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:


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


plz Help!

Petey

#2 k.soule

k.soule
  • Members
  • PipPipPip
  • Advanced Member
  • 30 posts
  • LocationIllinois

Posted 11 March 2006 - 03:15 AM

<?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>";
}

?>

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

#3 k.soule

k.soule
  • Members
  • PipPipPip
  • Advanced Member
  • 30 posts
  • LocationIllinois

Posted 11 March 2006 - 03:29 AM

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

<?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>";
}

?>


#4 txmedic03

txmedic03
  • Members
  • PipPipPip
  • Advanced Member
  • 313 posts
  • LocationCall, TX, USA

Posted 11 March 2006 - 03:40 AM

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.

SEMPER FIDELIS!

I can't stop you from doing something silly, but at least I can help you do it right.


#5 k.soule

k.soule
  • Members
  • PipPipPip
  • Advanced Member
  • 30 posts
  • LocationIllinois

Posted 11 March 2006 - 04:55 AM

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

<?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>";

?>



#6 p_tru

p_tru
  • Members
  • PipPip
  • Member
  • 11 posts

Posted 11 March 2006 - 04:10 PM

[!--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) View Post[/div][div class=\'quotemain\'][!--quotec--]
Whoops! Not to even mention it printed out the same thing three times :) The below script works fine -

<?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>";

?>
[/quote]

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

plz help

Petey





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users