Поместите php код в плавающий контейнер (ы) css?

Question

У меня вопрос по слоям php и css.

У меня есть следующий 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);

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

, который правильно отображает слово [Имя планеты] и номер [Система] в последовательности.

Приведенный выше код отображает информацию в таких строках, как;

Планета Солнце находится в системе 35. Планета Сатурн находится в системе 30. Я просто пытаюсь сделать эту информацию более привлекательной. таким образом, название планеты отображается справа от контейнера фонового изображения, а система в другом углу, возможно, окрашена. ....

Как разместить вышеуказанный код в плавающих контейнерах css?

Спасибо.

Answer 1

Поскольку это кажется списком планет, я бы использовал список HTML. Вы можете отредактировать CSS, чтобы он выглядел так, как вы хотите после.

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

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

Вы также можете использовать таблицу вместо списка. Таким образом, вы могли бы получить фон для столбца планеты, а другой для расположенного в первой системе.

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

Answer 2

Вы можете сделать что-то подобное, чтобы сохранить ваш код в чистоте

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

Если у вас включены короткие теги, вы можете заменить каждый <?php echo на <?=

Answer 3

Php код должен быть внутри тегов. Вы всегда можете закрыть эти теги и поставить некоторые теги htmls Пример:

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

Вы можете сделать все что угодно в php

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

Надеюсь, это поможет