Formatting sql query results into 4 columns

[manders]

Hi Guys, wondering if you can help as Im a bit of a newbie!

Basically I want to be able to display one image per result into a column in a table.

For each row in the table I want 4 columns with an image in each one. Its probably quite simple and I've been searching around but cant seem to get it working.

There is going to be lots of images so I just need this to keep working. Layout below!

 

X X X X

X X X X

X X X X

 

Heres my code so far. Thanks in advance!

 

<?php

$query = "SELECT * FROM holidays WHERE type='tropical'";

$result = mysql_query($query) or die(mysql_error());

while($row = mysql_fetch_array($result)) {

?>

 

$rows_returned = mysql_num_rows($result);

$base = $rows_returned/4;

$first_column = $second_column = $third_column = $base;

if ($base % 4 > 0) {

$first_column++;

}

if ($base % 4 > 1) {

$second_column++;

}

$first_break = $first_column;

$second_break = $first_column + $second_column;

echo '<table class="catlist"><tr><td>';

for ($i = 1; $i <= $rows_returned; $i++) {

$row = mysql_fetch_row ($result);

 

echo '<a href="<?php echo $row['galurl']; ?>"><img height="179" width="117" src="<?php echo $row['hotimage']; ?>" border="0" alt="<?php echo $row['altname']; ?>">';

 

if ($i == $first_break ¦¦ $i == $second_break) {

echo '</td></tr>';

}

}

echo '</td></tr></table>';

[ignace]

There are a few ways you can do this? I don't suggest using tables as you will have to make sure each row contains exactly 4 images or that you give the correct colspan to the correct <TD>

 

So a far easier method is to just put every <img> in a <div> float:left each div and make sure the total width of the containing element fits the total size of 4 images. It will put the other images on the next line automatically while maintaining valid HTML

[manders]

Hi, Many thanks for your reply.

I now have the four on one row but all of my images are broken. Any help would be great again thanks.

 

<?php

$dbc = mysql_connect('XXXXXX','a5314660_XXXX','XXXX') or die(mysql_error());

mysql_select_db("a5314660_XXXXX") or die(mysql_error());

?>

<?php

 

$count = 0;

$query = "SELECT * FROM holidays WHERE type='tropical'";

$result = mysql_query($query) or die(mysql_error());

 

echo '<div class="column1">';

while ($row = mysql_fetch_row($result))

 

        echo '<a href="'.$row['galurl'].'"><img height="179" width="119" src="'.$row['hotimage'].'" border="0" alt="'.$row['altname'].'">';

 

?>

 

Also when my boxes get displayed they are bunched up right together. I would like a slight gap inbetween each one but im not sure how to do this.

 

Here is my div properties in my stylesheet.

 

.column1 {float: left; width: 476px; padding: 20px; }