Click to See Complete Forum and Search --> : Loading Horizontally


BassMasterFlash
08-29-2004, 11:58 PM
Alright bare with me on this one.
I have a PHP script that loads in one picture after another into a plain HTML page. When the pictures load in they are presented vertically one right on top of the other along the left of the HTML page. Basically what i want to happen is when the pictures load in, have them load in Horizontally, side by side, until 100% of the page is used up , then start a new row and have the same thing happen until all the pictures are loaded in. How would i go about doing this?

MstrBob
08-30-2004, 12:03 AM
simply place image tag after image tag. Since images are inline elements, they'll be placed next to each other until there's no room on the line.

BassMasterFlash
08-30-2004, 01:08 AM
i actually have the pics sitting in a table..

<table width="100" height="100" border="1" cellpadding="0" cellspacing="3" bgcolor="#A7B2BA">
<tr>
<td height="80" align="center">
<div align="center"><img src="trey/thumbs/img_2.jpg"></div></td>
</tr>
<tr>
<td align="center">buttons go here<td>
</tr>
</table>

how would i get tables to line up side by side?

DocileWalnut
08-30-2004, 01:16 AM
Make a two-dimensional loop.

First, figure out how many pictures wide you want the table to be. Please note that the number you choose will be referred to as "cols".


<table width="700">

<?
$cols=5;
$count=0;
for ($x=0; $x<($numimgs/$cols); $x++) {


echo "<tr>";

for ($y=0; $y<$cols; $y++) {
echo "<td><img src=\"image$count\"></td>";
}

echo "</tr>";
$count++;
}
?>
</table>


This will produce a table 750 pixels wide, 5 columns, and however many rows you need.

Beforehand, though, you'll need to count the number of images you'll be using and store them in $numimgs.

Oh, and I forgot to mention. My example uses images named image1 image2 image3, etc.

ray326
08-30-2004, 11:02 AM
Actually the easiest thing to do would be to replace all the table stuff with a single div then do what MstrBob suggested.