Loading Horizontally

@BassMasterFlashAug 30.2004

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?

to post a comment

HTML

@MstrBobAug 30.2004 — #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.

@BassMasterFlashauthorAug 30.2004 — #i actually have the pics sitting in a table..

[code=php]<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>[/code]

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

@DocileWalnutAug 30.2004 — #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".

[code=php]
 <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>
 [/code]

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.

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

@ray326Aug 30.2004 — #Actually the easiest thing to do would be to replace all the table stuff with a single div then do what MstrBob suggested.

Loading Horizontally

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Loading Horizontally

4 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #HTML _↴