Using CSS to display a PHP database query

I'm new to PHP so i'm not sure how to do this. What I'm trying to do is to return the results of a database, and display each row in seperate defined div tags, so that each row can potentially be displayed at independent locations on the page using CSS.

For example

.div {
position:absolute;
left: 100px;}

.div2 {postion:absolute;
left: 100px;
top: 500px;}

<div class="div1">(1st row of data)</div>
<div class="div2">(2nd row of data)</div>

Heres my PHP code:


<?php
$hostname_connPHP = "localhost";
$database_connPHP = "scores";
$username_connPHP = "root";
$password_connPHP = "*****";
$Connection1 = mysql_pconnect($hostname_connPHP, $username_connPHP, $password_connPHP) or die(mysql_error());
mysql_select_db("scores") or die(mysql_error());

$result = mysql_query("SELECT * FROM scores")
or die(mysql_error());

$rowsPerPage = 12;

// by default we show first page
$pageNum = 1;

// if $_GET['page'] defined, use it as page number
if(isset($_GET['page']))
{
$pageNum = $_GET['page'];
}

// counting the offset
$offset = ($pageNum - 1) * $rowsPerPage;

$query = "SELECT name, school, score
FROM scores
order by score desc
LIMIT $offset, $rowsPerPage";
$result = mysql_query($query) or die('Error, query failed');

// print the student info in table
echo '<table cellpading="0" cellspacing="0">
<tr>
<td>Name</td>
<td>School</td>

<td>Score</td>
</tr>';
while(list($name, $school, $score) = mysql_fetch_array($result))
{
echo "<tr><td>$name</td><td>$school</td><td>$score</td></tr>";
}
echo '</table>';
echo '<br>';

$query = "SELECT *
FROM scores ";

$pagingQuery = "LIMIT $offset, $rowsPerPage";
$result = mysql_query($query . $pagingQuery) or die('Error, query failed');

// ... the code that prints the result in a table

// how many rows we have in database
$result = mysql_query($query) or die('Error, query failed');
$numrows = mysql_num_rows($result);

?>


Any help would be great, thanks :thumbsup:

I would stick with the <table><td><tr> you have in the php code and forget about divisions. In your CSS file define the table, tr and td values.

I have never seen MySQL output that doesn't use tables.

Thanks but i need the output to be generated in divs, as each div will have a separate background image and will be in different locations.

I was wondering if there was a iterating through the array, taking row 1s variables outputting it to <div class="example1"></div> then adding 1 to the row number, taking rows 2 variable outputting it to <div class="example2></div> then adding 1 to the row......etc.

Thanks

Thanks but i need the output to be generated in divs, as each div will have a separate background image and will be in different locations.

I was wondering if there was a iterating through the array, taking row 1s variables outputting it to <div class="example1"></div> then adding 1 to the row number, taking rows 2 variable outputting it to <div class="example2></div> then adding 1 to the row......etc.

Thanks

Any reason you prefer divisions over table rows? I know there is lots of information on how divisions are better than tables for positioning content but in the case of MySQL output tables are better.

Any reason you prefer divisions over table rows? I know there is lots of information on how divisions are better than tables for positioning content but in the case of MySQL output tables are better.
*snip* so that each row can potentially be displayed at independent locations on the page using CSS.*snip*
Ian, use a while or foreach loop. You have one futher up in your code. Just change the HTML to how you want your divs styled.

guessing at what you are actually asking but anyway...

<?php
$data=array();
while(list($name, $school, $score) = mysql_fetch_array($result))
{
$data[1].='<div class="div1">'.$name.'</div>';
$data[2].='<div class="div2">'.$school.'</div>';
$data[3].='<div class="div3">'.$score.'</div>';
}
?>

thats one of several ways to do essentially the same thing ... but the beauty of CSS is that as well as this

<div class="container1"><?php echo $data[1];?></div>
<div class="container2"><?php echo $data[2];?></div>
<div class="container3"><?php echo $data[3];?></div>

we could even just do this (since positioning is already taken care of)

<?php
for($x=1;$x<=3;++$x){
echo '<div class="container'.$x.'">'.$data[$x].'</div>'."\n";
}
?>

<?php
$data=array();
while(list($name, $school, $score) = mysql_fetch_array($result))
{
$data[1].='<div class="div1">'.$name.'</div>';
$data[2].='<div class="div2">'.$school.'</div>';
$data[3].='<div class="div3">'.$score.'</div>';
}
?>

thats one of several ways to do essentially the same thing ... but the beauty of CSS is that as well as this

<div class="container1"><?php echo $data[1];?></div>
<div class="container2"><?php echo $data[2];?></div>
<div class="container3"><?php echo $data[3];?></div>

we could even just do this (since positioning is already taken care of)

<?php
for($x=1;$x<=3;++$x){
echo '<div class="container'.$x.'">'.$data[$x].'</div>'."\n";
}
?>


Thank you, thats close to what I want, but i need the whole row in each div, eg.


<div class="div1">$name + $school + $score</div>

<div class="div2">$name + $school + $score</div>

<div class="div3">$name + $school + $score</div>

<div class="div4">$name + $school + $score</div>


...for as many rows in the table, this will be a fixed amount

I'm doing this for a study centre for kids to record their hardest shot, you can see what I'm looking for here:
http://www.alldownhill.org.uk/sample.jpg with each row of the table going into each white box.

Do i need a multi dimensional array as I need to count the rows as well as the divs?

Thanks

I think this is what you're talking about:

$result = mysql_query('SELECT * etc...');
$i = 1;
while($row = mysql_fetch_assoc($result))
{
echo '<div class="container' . $i . '">' . $row['name'] . ' + ' . $row['school'] . ' + ' . $row['score'] . '</div>' . "\n";
$i++;
}

Just order and limit them in the query. If this uses the same data array you have from higher up then you don't need to query the database again, and you should use a similar for() loop that the previous poster used. Use my example & his to make the output how you want it.

Yeah, this looks great, thanks for all your help people :)