Page 1 of 1

Displaying Images In...

Posted: Mon Mar 03, 2008 7:37 pm
by MarcS
~pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I'm trying to display images in a table while drawing it from MySQL. I'd like it to view as..

| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
etc

Except i either get it to view as all of the entries in the database as 1-xx in a vertical table... 

How do i get it to be a 5 col table and the row fills as an entry is added in the mysql database.

I know i gotta put the HTML coding in the right place but where?...

Code: Select all

echo "<table width='200' border='0' align='center' cellpadding='1' cellspacing='1'>";
    while ($data = mysql_fetch_array($result)) {
        echo "<tr><td><a href='";
        echo $data['photo'];
        echo "' rel='lightbox[roadtrip]'  title='"; 
        echo $data['title'];
        echo "'><img src='";
        echo $data['photo'];
        echo "' width='150' height='150' border='0'></a></td>";
    }
        echo "</tr></table>";

~pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Re: Displaying Images In...

Posted: Mon Mar 03, 2008 9:15 pm
by HCBen
Try thinking outside the box, err table. If all your images are 150x150, don't use a table at all. Let the images do the positioning and wrapping for you with some simple CSS.

Start with a fixed width container div. In this case, since you want 5 images across (and let's not assume any padding, margin or border spacing), the div should be 750px in width. Add some CSS to the images making them display:block; and float:left; Now simply add each image, using your php while loop, inside this div.

Since each image is a block element, floated left, with a fixed width, they'll each be added one after another from right to left. Then when the sixth image is added, it'll simple float down to another "row" beneath the previous five images and continue this process until you run out of images.

That's it.

From here, just keep tweaking the CSS for the container div and images to get them to display nicely on the page.

Cheers!
Ben

P.S. There is an alternative way to do this with a table, but you should always avoid using tables whenever possible for design/layout.

Re: Displaying Images In...

Posted: Mon Mar 03, 2008 11:07 pm
by MarcS
Wow, got it exactly as i wanted.... didn't think it would be that easy.. thanks alot! :D