Place php code inside floating css container(s)?

i have a question in regards to php and css layers.

i have the following php code:

session_start(); 
// Retrieve all the data from the table
$SQL = "SELECT * FROM Exodus_planets WHERE login_id = $user[login_id] LIMIT 10";
$result = mysql_query($SQL);

//while ($db_field = mysql_fetch_assoc($result)) {
//print $db_field['planet_name'] . "<BR>";
//print $db_field['location'] . "<BR>";
while($row = mysql_fetch_array( $result )){
    echo " Planet,   ".$row['planet_name'];
    echo " is located at System  ".$row['location'];
    echo "<br> ";
}

which correctly displays a word [Planet name] and a number [System] in sequence.

The above code displays the information in rows such as;

Planet Sun is located in system 35. Planet Saturn is located in system 30. i开发者_运维百科'm just trying to make this information display a look a little nicer. in a way so planet name shows up in the right of a background image container and system in another corner possibly colored. ....

How do i place the above code inside floating css container(s)?

Thank you.

As it seems to be a list of planets, I would use an HTML list. You can edit the css to have it look the way you want after.

echo ' <ul class="planetList"> ';
while($row = mysql_fetch_array( $result )){
    echo '<li>';
    echo " Planet,   ".$row['planet_name'];
    echo " is located at System  ".$row['location'];
    echo '</li> ';
}
echo '</ul>';

In CSS

ul.planetList {
   display:block;
   float:right;
   background-image:url('yourBackground.jpg');
   background-position:left;  
   background-repeat:repeat-y;
   /* CSS 3 Only */
   background-size:{length of your text}px 100%;
}

You could also use a table instead of the list. This way, you could get a background for the planet column, and another one for the located at sytem one.

echo ' <table> ';
echo ' <tr><th>Planet</th><th>System</th></tr>';
while($row = mysql_fetch_array( $result )){
    echo '<tr>';
    echo '<td class="planet">' . $row['planet_name'] . '</td>';
    echo '<td class="system">' . $row['location']    . '</td>';
    echo '</tr> ';
}
echo '</table>';

CSS :

table>tr.planet {
   background-image:url('yourBackground.jpg');
   background-position:left;  
}
table>tr.system {
   background-color:#CCFF00;
}

Php code should be inside tags. You can always close these tags and put some htmls tags Example:

<div class="bla"><?php
my code
?></div>

Obviusly you can do everything in php

<?php
echo '<div class="bla">';
....phpcode....
echo '</div>';
?>

Hopefully this helps

You can do something like this to keep your code clean

<?php
session_start(); 
// Retrieve all the data from the table
$SQL = "SELECT * FROM Exodus_planets WHERE login_id = $user[login_id] LIMIT 10";
$result = mysql_query($SQL);

$planets = array();
while($row = mysql_fetch_array( $result )){
    $planets[] = $row;
}

foreach($planets as $planet): ?>
<div class="prettyFloatyDiv">
  Planet, <?php echo $planet['planet_name']?> 
  is located at System <?php echo $planet['location']?>
  <br/>  
</div>

<?php endforeach; ?>

If you have short tags enabled, you can replace every <?php echo with <?=