Дивы перекрываются при аварии - PullRequest
Новая
       6

Дивы перекрываются при аварии

0 голосов
/ 12 июля 2011

У меня есть сообщения, которые выводятся из моей базы данных mysql. Если их больше одного, они отображаются в отдельных div в порядке убывания номера ранга (взятого из DB). Тем не менее, когда div-ы повторяются, все перекрываются сверху. Я считаю, что это проблема CSS. Дело в том, что каждый div имеет несколько sub div. Я думаю, что атрибут "position" мог бы способствовать этому. Я хотел бы, чтобы каждый div отображался примерно с 100px между каждым. Спасибо.

КОД: 

<code>$post = array();
$f=0;
while ($row=mysql_fetch_assoc($g)){
  $post[]=$row['post'];

  echo "<div id='area'>";
  echo "<div id='badge'><span style='color: gray;'>Answered by:</span>";
  include 'badge.php';
  echo "</div>";
  echo "<div id='areapost'><pre>$post[$f]
"; $ F ++; } echo ""; / * конечная область * /

КОД CSS: 

#area {
  background-color: #fff;
  border: 1px solid red;
  width:500px;
  height: 300px;
}

#badge{
  position: absolute;
  top: 0px;
  left: 0px;
}

#areapost{
  position: absolute;
  top: 0px;
  right: 0px;
  height: 300px;
  width: 380px;
  background-color: #E0E0E0;
  overflow: -moz-scrollbars-vertical;
  overflow-x: hidden;
  overflow-y: scroll;
}

«Область» - это весь почтовый контейнер. Ареапост и значок являются элементами внутри "области"

Ответы [ 4 ]

2 голосов
/ 12 июля 2011

Все элементы на странице должны иметь уникальный идентификатор, в противном случае вы получите непредвиденное поведение. Исправьте это и посмотрите, куда вас это приведет.

1 голос
/ 12 июля 2011

Попробуйте переместить открывающий тег div «area» из условного: 

 while ($row=mysql_fetch_assoc($g)){
    $post[]=$row['post'];
    echo "<div id='area'>";

должно быть: 

echo "<div id='area'>";
while($row=mysql_fetch_assoc($g)){
     $post[]=$row['post']

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

0 голосов
/ 12 июля 2011

Вам почти всегда нужно открывать и закрывать div на одном и том же уровне зацикливания. Здесь вы открываете <div id='area'> внутри цикла while и закрываете его вне цикла while. Им нужно либо оба, либо оба. Кроме того, ваш идентификатор должен быть уникальным по всей вашей странице, иначе вы должны использовать классы для этих элементов.

Вам также не нужно позиционировать все эти области абсолютно. Я добавил контент div вокруг всего. Позиционируйте это абсолютно, и класс области относительно. Вам не нужен стиль на #area, измените его на .area. 

<code>$f=0;

echo "<div id='content'>"
while ($row=mysql_fetch_assoc($g)){
  $post[]=$row['post'];

  echo "<div id='area-'" + $f + " class='area'>";
  echo "<div class='badge'><span style='color: gray;'>Answered by:</span>";
  include 'badge.php';
  echo "</div>";
  echo "<div class='areapost'><pre>$post[$f]
"; echo ""; / * конечная область * / $ F ++; } echo ""
0 голосов
/ 12 июля 2011

также попробуйте использовать относительное позиционирование с пробелом 100px на каждом. таким образом, каждый div будет располагаться относительно предыдущего div, а не одного пятна, вызывая их наложение.

...