Question

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.

Answer 1

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;
}